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Prólogo al contenido 


En los tiempos actuales, tener un sitio web es funda- 
mental para posicionar cualquier emprendimiento: 
una empresa, una organización sin fines de lucro, un 
pequeño comercio, entre muchos otros. Si no conta- 
mos con la presencia de estos en el ciberespacio, la 
promoción y difusión se complica más de la cuenta. 
Por lo tanto, poseer los conocimientos para diseñar 
y armar un sitio web es un valor agregado muy 
importante en la sociedad de hoy en día. 


Tener esta habilidad nos permite una mejor inser- 
ción en el mercado laboral: tanto para armar 
el sitio de nuestro propio emprendimiento, como 
para postularse a un nuevo trabajo o crear nues- 
tro estudio de Diseño web. 
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Prólogo 


Realizar un sitio web, si tenemos la información ade- 
cuada, resulta una tarea sencilla. La idea detrás de 
este libro es proporcionar una guía práctica para dise- 
ñar un sitio web con Dreamweaver y Fireworks y, 
también, responder cuestiones que cualquier perso- 
na, sea o no diseñador/programador web, debería 
saber a la hora de encargar a un tercero su sitio. 


Uno de los objetivos principales es que este libro sirva 
como un material de consulta al recurrir frente a una 
cuestión funcional concreta, y no solamente para 
saber, por ejemplo, cómo se inserta una tabla en 
Dreamweaver. ¡Es nuestro deseo que esta obra sea 
una gran herramienta de ayuda para la creación de 
sitios web de carácter profesional! 


B PRELIMINARES 


El libro de un vistazo 


Este libro está enfocado a usuarios principiantes e intermedios, que deseen aprender cómo diseñar un sitio 
web, desde el principio. Para ello, utilizaremos los programas Dreamweaver y Fireworks, además estudiare- 
mos los conceptos fundamentales de estas aplicaciones. 


CAPÍTULO 1 


PRINCIPALES CONCEPTOS 

DE DREAMWEAVER 
Realizaremos un repaso de los contenidos básicos 
de Dreamweaver. Incluirá creación de tablas, inser- 
ción de atributos meta, creación de vínculos y 
propiedades de página. 
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CAPÍTULO 2 


INTRODUCCIÓN A FIREWORKS 
Haremos un repaso de los contenidos básicos de 
Fireworks. Incluirá edición de imágenes, diseño de 
GIF animados y barras de navegación dinámicas 
con comportamientos. 
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CAPÍTULO 3 

DISEÑO ESTÁTICO 
Elaboraremos el diseño estático preliminar del 
sitio. Analizaremos los componentes estructurales 
y de contenido, además de trabajar cuestiones de 
colores, tipografías, plantillas y hojas de estilo. 
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CAPÍTULO6 
ELEMENTOS GRÁFICOS 


CAPÍTULO 4 


ELEMENTOS GRÁFICOS 


ESTÁTICOS DINÁMICOS E INSERCIÓN 


Trabajaremos en el diseño de los elementos gráficos DE LOS ARCHIVOS EN EL HTML 





estáticos del sitio. Crearemos diferentes archivos ori- Nos ocuparemos del diseño de los elementos gráfi- 
ginales de imagen para insertar en Dreamweaver, cos dinámicos del sitio. Crearemos GIF animados y 
como encabezados y pies de páginas. barras de navegación dinámicas con comportamien- 


tos JavaScript programables. Además, insertaremos 
en HTML los diferentes elementos gráficos creados. 
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CAPÍTULO 5 SERVICIOS 

DISEÑO EN HTML AL LECTOR 
Aprenderemos a preparar la estructura de tablas en En este último apartado, incluimos un índice temático 
Dreamweaver para comenzar a estructurar el sitio. organizado por palabras, que nos permitirá encontrar 
Abordaremos cuestiones de espacios entre celdas, los términos más importantes utilizados en la obra. 
bordes, propiedades de tablas y alineaciones. 
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B PRELIMINARES 


Introducción a Sitios web 


El objetivo de este libro es que, al finalizar su lectura, 
podamos diseñar y programar un sitio web completo. 
Comenzaremos por introducir conocimientos de los 
programas Fireworks y Dreamweaver, para así poder 
empezar con una base común compartida. Esto com- 
prende, entre otras cosas, definición de sitio, creación 
de tablas e inserción de imágenes en Dreamweaver, 
edición de archivos, diseño de GIF animado y com- 
portamientos en Fireworks. 


Trabajaremos sobre el diseño de las páginas en 
cuestión. Aquí diseñaremos elementos como el 





encabezado, el pie de página y las divisiones estructu- 
rales del sitio, siempre con la idea de que puedan ser 
aplicables a tablas y celdas. También veremos cuestio- 
nes de colores y de tipografías. 


Con el diseño estático y los elementos listos, proce- 
deremos a insertarlos en Dreamweaver. Para esto 
deberemos tener muy en cuenta las medidas de las 
tablas y los espacios. Cuando ya esté listo el diseño 
base, volveremos a Fireworks para crear los elemen- 
tos gráficos dinámicos, que incluyen GIF animados y 
la barra de navegación dinámica con acciones. 
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Capítulo 1 


Principales conceptos 
de Dreamweaver 





En este primer capítulo, 
repasaremos las herramientas y opciones 
básicas de Dreamweaver. 
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Principales 
conceptos 
de Dreamweaver 


Antes de comenzar a crear nuestro proyecto web, es 
muy importante repasar ciertos conocimientos 
fundamentales de Dreamweaver. De esta manera, 
tendremos un punto de partida común para poder 
elaborar el sitio y sus componentes. 


ORDEN Y NOMBRE DE LOS ARCHIVOS 
Algo que tenemos que tener muy presente al traba- 
jar con Dreamweaver es que debemos ser ordena- 
dos. Toda la materia prima (textos, imágenes, 
información, etcétera) que usaremos para la creación 
de nuestro sitio debe estar separada y guardada 
correctamente en carpetas y subcarpetas (Figura 1). 
Siempre es preferible que nos excedamos en la 
cantidad de divisiones, a que nos falten. 


También es muy importante el nombre de cada uno 
de los archivos que integren nuestro proyecto. 
Es fundamental recordar que solo deben llevar 


FIGURA 1. 
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minúscula, no deben tener tildes ni cualquier otro 
carácter típico del idioma español, y no deben 
superar la extensión de 25 caracteres. Esto es por- 
que muchos servidores diferencian entre mayúsculas 
y minúsculas y desconocen caracteres como la tilde 
y otros signos ajenos al inglés. 


Si colocamos en el servidor archivos mal nombra- 
dos, éstos no se abrirán y aparecerá un mensaje de 
error. Un dato fundamental: el archivo de apertura 
de un sitio web se llama siempre index.html. 


MENÚS Y BARRAS DE HERRAMIENTAS 
Para un fin práctico dividiremos la interfaz de trabajo 
de Dreamweaver en cinco áreas. Esto nos ayudará a 
repasar mejor cada una de las partes y nos facilitará la 
posterior referencia a lo largo del libro. 


Algo que tenemos 

que tener muy presente 
al trabajar con 
Dreamweaver es que 
debemos ser ordenados 
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Menú principal 

El menú principal es el menú típico de cualquier pro- 
grama. Básicamente, controla todo lo que se ve y lo 
que no se ve. Desde aquí podemos crear y guardar 
archivos, ocultar o mostrar barras de herramientas, 


manejar las propiedades de la página, colocar las 
propiedades de las tablas e insertar objetos (imágenes, 
archivos, videos, etcétera), entre varias otras cosas. En 
la Guía Visual 1 describiremos las opciones principa- 
les del menú principal del Dreamweaver. 


El menú principal de Dreamweaver 


A did 10 siii y 
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Q Archivo: en este menú podremos encontrar opciones para crear, abrir y guardar archivos. 
Además, tenemos las opciones de importar y exportar, y la de vista previa en el navegador. 

(2) Edición: aquí podemos encontrar las clásicas opciones para cortar, pegar y copiar, junto con 
las opciones de selección y de preferencias. 

O Ver: en este menú, podremos seleccionar opciones para achicar o maximizar la visualización del 
documento, junto con las opciones para ver el código HTML. 

(4) Insertar: desde esta opción podremos insertar imágenes, tablas, archivos de Flash, 
hipervínculos y también, etiquetas para formularios. 

O Modificar: con este menú podremos controlar propiedades de imágenes, tablas y marcos, 
entre otras cosas. También cambiar, abrir y eliminar links. 

O Texto: aquí encontraremos las opciones para cambiar la alineación, la fuente y el estilo de 
los textos. Además, podremos controlar y editar las hojas de estilo (css). 

7) Comandos: desde este menú podemos obtener extensiones para el Dreamweaver, que son 
agregados extra para el programa. 

O Sitio: desde aquí, podremos crear y editar nuevos sitios con sus respectivos archivos. 

O Ventana: es un menú muy importante, desde el que podremos visualizar y ocultar las diferentes 
ventanas del programa con sus respectivas opciones. 

(10) Ayuda: aquí encontraremos el menú de ayuda del programa y su registro, entre otras cosas. 
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Barra de herramientas horizontal 

La barra de herramientas horizontal es un menú gráfi- 
co que se encuentra justo debajo del menú princi- 
pal. Si bien todas sus opciones también están en este 
último, a la hora de trabajar resulta muy dinámico y 
nos deja acceder a herramientas de uso frecuente. 
Está compuesto por lenguetas que hacen referencia a 
diversas categorías y permiten, de forma rápida, crear 
tablas, insertar imágenes, crear vínculos, crear formu- 
larios y varias otras cosas (Guía Visual 2). 


Área de trabajo 

El área de trabajo es el espacio de labor, es decir, 
nuestra página web (Guía Visual 3). Conviene 
pensar en él como si fuera un documento de Word. 
Todo lo que coloquemos allí será visto en un explora- 
dor de Internet. También cuenta con algunas herra- 
mientas que, entre otras cosas, permiten previsualizar 
la página en un navegador, insertar y editar contenido 
del encabezado del documento y alternar entre las 
diferentes vistas (Código, Dividir y Diseño). 


La barra de herramientas horizontal de Dreamweaver 


iO Insertar Común 


Y OS 
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Diseño Formularios Datos Spry Texto Favoritos 


D- F 


O Herramienta de hipervínculo: con ella podremos insertar un texto con hipervínculo, 


O Herramienta de vínculo de correo electrónico: esta opción, nos sirve para insertar un 
texto con vínculo de correo electrónico. 

O Herramienta de anclaje: esta alternativa nos sirve para insertar un vínculo ancla, para 
vincular elementos dentro de un mismo archivo HTML. 

O Herramienta de tabla: podremos insertar una tabla con sus respectivas celdas y columnas. 

O Herramienta de imágenes: esta opción nos brinda la posibilidad de insertar imágenes de 
diversos tipos y de hacer mapa de imágenes. 

O Herramienta de media: para insertar elementos de Flash y de otros programas externos. 

OQ Herramienta de fecha: esta opción, nos sirve para agregar la fecha del día en cualquier lugar 
de la página; tiene diversas opciones de formato. 

O Herramienta de componentes de encabezado: nos sirve para agregar atributos meta al archivo 
HTML. Son fundamentales para la indexación en buscadores. 


14 RedUSERS: 


Principales conceptos de Dreamweaver 





El área de trabajo de Dreamweaver 


CATALINASEVENTOS,.htm O 
ii (s»] código | 3 Dividir Título: CATALINASEVENTOS 1), Y | C [El ld | 1% F Comprobar página 
O ae a i 





Q Opción vista código: nos permite visualizar el código HTML en el área de trabajo. 

© Opción vista dividir: nos permite visualizar el código HTML en la parte superior del área de 
trabajo y la vista de diseño en la parte inferior. 

O Opción vista diseño: esta alternativa nos permite visualizar la vista de diseño en el área de 

trabajo (en Dreamweaver, resulta la opción predeterminada). 

Opción título de documento: nos sirve para colocarle el título de encabezado al documento. 

Opción para administrar archivos: nos permite subir o bajar archivos del servidor remoto y 

también modificar sus propiedades de escritura y de protección. 

Opción de vista previa: posibilita previsualizar el archivo HTML en un navegador de Internet. 


Opción para actualizar vista de diseño: nos sirve para actualizar los cambios en la vista 
de diseño que se realizan en la vista de código HTML. 

Opciones varias de visualización: nos permite visualizar diferentes herramientas de diseño, 
como reglas, guías, cuadrículas y otras. 

Opción de ayudas visuales: nos sirve para activar o desactivar ayudas visuales varias, como 
anchos de tabla, bordes de tabla, mapa de imágenes y demás. 

Opción para comprobar compatibilidad con navegadores: nos sirve para comprobar si el 


600 


archivo HTML puede ser visto por diferentes versiones y tipos de navegadores sin problemas. 
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Barra de propiedades propiedades (Guía Visual 4) podremos manipular 
La barra de propiedades se encuentra en la parte las características de todos los componentes de 
inferior de Dreamweaver y nos mostrará las pro- nuestro sitio. Nos permitirá, entre otras cosas, 
piedades del objeto que tengamos seleccionado cambiar el tipo, tamaño y color de letra del texto, 
en un determinado momento. Desde la barra de agregar celdas a una tabla y escribir un vínculo. 


La barra de propiedades de Dreamweaver 











O Opción de formato: esta herramienta, nos sirve para darle un formato predeterminado 
al texto y tiene varias opciones. 


Opción de estilo: nos sirve para darle un estilo (hojas de estilo CSS) a un texto. 

Opción de fuente: nos sirve para seleccionar el tipo de fuente que se desea usar (Arial, Times 
New Roman, etcétera). También se pueden agregar fuentes a la lista predeterminada. 

Opción de tamaño: nos sirve para darle el tamaño deseado al texto. 

Selector de color: nos sirve para seleccionar el color del texto. 

Opción de negrita: nos sirve para aplicar “negrita” al texto (bold). 

Opción de itálica: nos sirve para aplicar “itálica” al texto (italic). 

Opción de alinear hacia la izquierda: nos sirve para alinear el texto hacia la izquierda. 
Opción de alinear hacia el centro: nos sirve para alinear el texto hacia el centro. 
Opción de alinear hacia la derecha: nos sirve para alinear el texto hacia la derecha. 
Opción de alinear justificado: nos sirve para alinear el texto de forma justificada. 
Opción de lista sin ordenar: esta alternativa, nos da la posibilidad de hacer una lista con 
puntos (círculos, cuadrados, entre otras opciones). 

Opción de lista ordenada: nos sirve para hacer una lista numerada (números, letras, etcétera). 


960 000000000 OO 


Herramienta de inserción de vínculo: nos sirve para colocarle un vínculo a un texto, 
imagen u otro elemento que se pueda seleccionar del área de trabajo. 
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© Herramienta de destino de vínculo: nos sirve para especificar el destino de un vínculo 


(por ejemplo, que se abra en una nueva ventana). 
O Opción de propiedades de página: nos sirve para colocarle las diferentes propiedades a la 
página (color de fondo, color de vínculos, título de encabezado, etcétera). 


Barra de ventanas 

La barra de ventanas se encuentra en el lado dere- 
cho del programa. Básicamente, es un conjunto de 
varias ventanas que podemos abrir, minimizar y 
ocultar para ayudarnos a controlar aspectos estruc- 
turales del programa. Desde aquí tendremos la posi- 
bilidad, entre otras cosas, de definir el sitio sobre el 
que estamos trabajando, ver el historial de cambios 
del documento, crear, modificar y eliminar las hojas 
de estilo, e insertar comportamientos. 


PROPIEDADES DE PÁGINA 

Y ATRIBUTOS META 

Las propiedades de página y los atributos meta 
nos ayudan a controlar la base de cada una de las 


páginas que conforman nuestro sitio. Es muy impor- 
tante prestarles la debida atención ya que, de lo 
contrario, ciertos elementos pueden mostrarse de 
manera inadecuada o no funcionar. 





») PENSAR SIEMPRE EN PIXELES 


En nuestro proyecto, trabajaremos con las medidas en pixeles [no existen los centímetros ni 


las pulgadas]. Esto se debe a que el sitio, junto con todo lo que lo compone, será visto en un 


monitor, lo que significa que también nos manejaremos en pixeles con las imágenes. 
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Propiedades de página 

Permiten programar ciertos parámetros básicos que 
tienen que ver con la apariencia de las páginas web 
(Figura 2). Es importante recordar que estas pro- 
piedades deben ser colocadas en cada página 
HTML, si bien luego se pueden copiar y pegar. 


Fundamentalmente, permiten controlar el color de 
texto, el color de fondo, el color de los vínculos (visi- 
tados, no visitados y activos), colocar una imagen de 
fondo, configurar los distintos márgenes y agregar 
un título al documento (que aparecerá en la barra 
superior del navegador). 


Propiedades de la página 


Categoría 


Atributos meta 

Son atributos y variables de una página web que, en 
su mayoría, son invisibles para los usuarios o nave- 
gantes, pero muy importantes para los motores de 
búsqueda y para otros programadores. Lo cierto es 
que mucha gente no les presta demasiada atención 
y, en realidad, son muy importantes. Si están bien 
programados, ayudarán a que nuestro sitio figure 
en una buena posición dentro de la categoría elegi- 
da en un buscador. Básicamente, permiten insertar 
palabras y frases dentro de cada página, para que 
sean leídas por los robots de los motores de búsque- 
da y luego aparezcan en los resultados. 


Aspecto 





Vínculos 
Encabezados 
Título /Codificación 
Imagen de rastreo 


FIGURA 2. 

El menú de propiedades 
de página abierto 

en la categoría Aspecto. 
Podemos observar 








las propiedades del texto 


predeterminado. 


Fuente de página: Fuente predeterminada 
Tamaño: w [píxeles 
Color del texto: E #000000 
Color de fondo: L #FFFFFF 
Imagen de fondo: 


Examinar... 


Repetir: 








PENSAR LAS PALABRAS PARA LOS BUSCADORES 


Margen izquierdo: 0 


Margen derecho: 
Margen inferior: 


Margen superior: ol 


B 






Conviene pensar palabras para no más de tres categorías de búsqueda, de lo contrario, 


nuestro sitio puede quedar dentro de secciones que no pertenecen a nuestro rubro. 


Mientras más específicos seamos, lograremos un mejor posicionamiento. 
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TABLAS Y CELDAS 

Dreamweaver tiene una regla de oro: todo el 
contenido de una página (textos, fotos, etcétera) 
va dentro de tablas, nada va suelto, salvo alguna pe- 
queña excepción que será aclarada. Si uno aprende a 
manejarlas bien, maneja el 50% del programa. 


Tablas 

Toda tabla está compuesta por celdas, lo que posi- 
bilita que una tabla pueda tener la cantidad de 
celdas que deseemos. Esto nos permite distribuir y 
ordenar los elementos de nuestra página como 
deseemos. Hay tres maneras de insertar una tabla: 
con un clic en el cuarto icono de la barra de herra- 
mientas horizontal, con Insertar/Tabla o con 
CTRL+ALT+T (Figura 3). Al usar cualquiera de estas 
opciones aparecerá el menú de inserción de tabla. 


Repasaremos sus componentes: 

e Filas: es la cantidad de filas o divisiones hori- 
zontales que tendrá la tabla. 

e Columnas: es la cantidad de columnas o divisiones 
verticales que tendrá la tabla. 

e Ancho de tabla: aquí colocamos la longitud que 
tendrá la tabla, expresada en pixeles o porcentaje. 
Más adelante, veremos cuál utilizar. 
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Dreamweaver tiene 
una regla de oro: 
todo el contenido 

de una página (textos, 
fotos, etcétera) 

va dentro de tablas 


e Grosor del borde: aquí especificamos el tama- 
ño de borde (ancho) que tendrá nuestra tabla. 
Se mide en pixeles. 

e Relleno de celda: desde aquí configuramos el 
espacio que hay entre el contenido de la tabla o 
de la celda y su borde. También se mide en pixeles. 

e Espacio entre celdas: aquí definimos la sepa- 
ración entre las distintas celdas de una misma tabla. 
Como los anteriores, se mide en pixeles. 


Tabla 


Tamaño de tabla 


Filas: 
Ancho de tabla: 
Grosor del borde: 


Relleno de celda: 





Espado entre celdas: 
Encabezado 


Accesibilidad 


Texto: 


Alinear texto: |Predeterminado v 


Resumen: 


FIGURA 3. Aquí, podemos observar 
las propiedades y las características básicas 
de la tabla que vamos a crear. 
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Una vez insertada la tabla, podremos modificar 
todas las propiedades anteriores y también algu- 
nas nuevas, como agregarle un color de fondo 
o de borde, alinearla horizontalmente e insertarle 
una imagen de fondo. 


Celdas 

Las celdas están formadas por la intersección de las fi- 
las (horizontales) y las columnas (verticales) de una ta- 
bla. Una tabla puede poseer infinitas celdas, pero de- 
bemos considerar que mientras más tenga, cada una 
de éstas tendrá menos espacio para colocar conteni- 
do. Esto dependerá del Relleno de celda y del Es- 
pacio entre celdas que le coloquemos a la tabla. 


La celda tiene propiedades independientes de las de 
la tabla (Figura 4). Para acceder a éstas debemos 
posicionarnos con el cursor y hacer clic adentro de la 
tabla, sobre la celda que deseemos seleccionar. 


Formato Estilo Ninguna 


Fuente Fuente predeterr + Tam MEP y 


F #000000 


æ s 


Es importante advertir 
que las tablas siempre 
tienen celdas, 

aunque sea una sola 


Es importante advertir que las tablas siempre tienen 
celdas, aunque sea una sola (éste será el caso de 
una tabla que tenga una fila y una columna). En 
toda ocasión se debe tener presente esto, sobre 
todo por las propiedades de cada una. Repasare- 
mos las propiedades de las celdas: 


e Horiz: permite alinear los elementos que se 
encuentran dentro de la celda a la izquierda, 
al centro o a la derecha. 

e Vert: alinea los elementos dentro de la celda, 
de manera superior, medio o inferior. 








m- | Celda Horiz An Noaj. [F] Fnd| 
Liz a i 
| E e A a C 








| € (O [Propiedades de la página... 


7 Borde [|] | 








FIGURA 4. Se pueden observar las propiedades de la celda seleccionada en la parte inferior 


de labarra de Propiedades. 


COLOR DE BORDE 





© 





El color de borde de la tabla solo será visto si ésta tiene borde. Un error común ocurre cuan- 
do se le asigna un determinado color a la tabla y, en realidad, no tiene borde (borde 0). 


Debemos colocar por lo menos un pixel a la propiedad del borde para visualizar el color. 
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e An y Al: nos permite especificar el ancho y el 
alto de una celda. Generalmente, estas propie- 
dades no se usan, ya que el mismo contenido 
se encarga de esto. 

e Fnd: permite insertar una imagen de fondo para 
la celda sobre la cual podemos escribir. 

e Fnd (con casilla de color): permite colocarle un 
color de fondo a la celda. Éste puede ser diferente 
al color de fondo de la tabla. (Figura 5). 

e Borde: permite colocarle un color de borde a la 
celda. Éste puede ser diferente con respecto al 
color de borde de la tabla. 

e Combinar celdas: junta las celdas seleccionadas 
y las convierte en una única celda. Funciona para 


unir filas, columnas o ambas. 
e Dividir celdas: permite dividir la celda selec- 
cionada en la cantidad elegida de columnas o filas. 


MARCOS 

Los marcos o frames son una práctica forma de di- 
seño web que podemos usar para sitios con mucho 
contenido. También son muy prácticos a la hora de 
mantener estáticas ciertas porciones de un docu- 
mento HTML. Esencialmente, son distintos archivos 
HTML unidos en uno solo. Es decir, cualquier pá- 
gina web hecha en marcos tiene, por lo menos, 
tres archivos HTML. En el ejemplo que se muestra 
en la Figura 6 podemos ver una página de marcos. 








<body> <table > <tbody> <tr> <td> 


z C J] #rF B®) 
E E E 
E- . E 


ii Y Propiedades 


Fuente Fuente predeterr ~ Tam MA ~ 


== Celda Horiz An 
Eoi NS 
m 
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FIGURA 6. Observamos 

un documento HTML 
dividido en marcos. 

El marco más pequeño 

de la izquierda actúa 
como barra de navegación 
estática, y el de la derecha 
como espacio 

para el contenido. 
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Cada marco es una página web diferente, es 
decir, un archivo único. En el caso de la Figura 6, 
el marco izquierdo podría llamarse barra.html, el 
derecho, principal.html y el contenedor (que 
agrupa a los otros dos), index.html. 


Una de las características positivas de diseñar o pro- 
gramar una página con marcos es la barra de nave- 
gación estática. Muchas veces, si la página tiene una 
cantidad importante de contenido, aparecerá la 
barra de desplazamiento vertical a la derecha de la 
ventana del navegador, para que podamos navegar 
todo el documento. Pero al ir bajando, la barra de 
navegación (ya sea vertical u horizontal) se perderá 
y el usuario no la tendrá más a mano. 


Las opciones para crear una página web con marcos 
se encuentran en el menú principal, en Modificar / 
Conjunto de marcos. Si diseñamos un archivo 





BARRA DE NAVEGACIÓN 


HTML de esta manera, la barra de navegación (tan- 
to si es horizontal como si es vertical) será una pá- 
gina aparte y no se moverá cuando el usuario use la 
barra de desplazamiento vertical. Esto posibilitará 
que los navegantes puedan acceder de forma rápida 
y sencilla a los vínculos. 


Crear una página o un sitio con marcos suele ser un 
poco más complicado que hacer un diseño a página 
completa (llamado diseño Body). En este caso ten- 
dremos que tener cuidado con las medidas y con los 
vínculos. En nuestro proyecto trabajaremos una 
página en marcos y allí veremos con más deteni- 
miento sus propiedades y características. 


Antes de pasar al siguiente tema, conviene mencio- 
nar que el diseño en marcos no es mejor que el 
diseño en Body. Existen webmasters que consideran 
este último como algo primitivo y típico de 


Una de las características 
positivas de diseñar 

o programar una página 
con marcos es la barra 
de navegación estática 





Se llama barra de navegación a la sección de una página que contiene los vínculos para 


acceder al resto del sitio o a sitios externos. Todos los sitios bien diseñados deben 


tener una barra de navegación visible y accesible. 
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principiante. Nada más lejos de la verdad. Debe- 
mos utilizar el tipo de diseño que mejor se adapte 
al contenido del sitio. Esto es algo que, como 
veremos, se decide al comienzo, antes de abrir 
siquiera el Dreamweaver. 


¿QUÉ SON LAS PLANTILLAS? 

Las plantillas o templates son un tipo especial 
de archivo que sirve para crear un diseño de página 
fijo. De esta manera, podemos crear un documento 
HTML cuyo diseño esté basado en la plantilla. 


Al diseñar una plantilla, elegimos cuáles de sus 
sectores o regiones pueden ser modificados. Esto 
nos permite controlar qué elementos de la página 
quedarán siempre estáticos y cuáles no, lo que es 
ideal para sitios que tienen muchas páginas cuyos 
diseños son prácticamente iguales. También es 
ideal para cuando trabajamos con otras personas 
responsables de la edición de contenido de una 
web, ya que solo podrán editar aquello que nosotros 
deseemos (Figura 7). Otra utilidad muy importante de 
las plantillas es que nos permiten actualizar varias pá- 
ginas a la vez, ya que cuando realizamos un cambio en 


La Adobe Dresmueaver 053 - JUmtited-5 OOTML] 
Aichero Edeción Wei jnna Modiicar Teno Coméndos Htbo Yentina Éyywda 
Diseño | Formularios | Delos | Sprp | Teto | Faros 


e | PA 


mr 


la parte no modificable de la plantilla, todas las 
páginas que la usan verán reflejado el mismo cam- 
bio de forma inmediata. 


Las opciones para crear un archivo con plantillas se 
encuentran en el menú principal, en Modificar / 
Plantillas o en Archivo/Nuevo (allí debemos 
seleccionar Plantilla HTML). Un documento que se 
crea a partir de una plantilla permanece conectado 
a ella, salvo que lo separemos luego. 


Al guardar una plantilla, Dreamweaver crea auto- 
máticamente una carpeta en el directorio del sitio 
donde la archiva. Es muy importante no cambiar 
su nombre o su ubicación, de lo contrario, nuestras 
páginas basadas en plantillas no funcionarán. 


La extensión de archivo con la que Dreamweaver guar- 
da las plantillas es .DWT (Dreamweaver Template). 
Nunca debemos confundirla con un archivo HTML, 
lo que puede ser una equivocación sencilla ya que 
a simple vista son muy parecidos (Figura 8). Para 
asegurarnos de esto, es importante que veamos la 
extensión del archivo que se está editando. 


FIGURA 7. 
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Observamos una plantilla 
con tres regiones 
modificables. Todo lo que 
esté fuera de esas 
regiones no podrá ser 
cambiado, excepto que 

la persona tenga acceso 
al documento de plantilla. 
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G Adobe Dreamweaver CS3 - [C:A\Users\elsa\Desktop\Sitios\Quinta Aroma Verde.htm*] 
Archivo Edición Ver Insertar Modificar Texto Comandos Sitio Ventana Ayuda 


i € Insertar Común 


Diseño | Formularios | Datos | Spry | Texto | Favoritos 


a oslpagm- 4- HDR 


| Quinta Aroma Verde.htm* * 


Jal ¡Código | 2) a La pero, Diseño | Título: | Quinta Aroma Verde 


FIGURA 8. 

Podemos apreciar que 

a simple vista, un archivo 
HTML y un DWT son casi 
idénticos, pero si 
prestamos atención 
observaremos las 
diferencias y las marcas. 


HOJAS DE ESTILO/CSS 

Las hojas de estilo o CSS (Cascade Style Sheets) 
son un grupo de reglas de formato que condicionan 
el aspecto del contenido de una página o sitio web. 
La utilización de este tipo de archivo permite se 
parar, por un lado, el contenido de la página (ubi- 
cado en el HTML) y, por otro, su formato o presen- 
tación (ubicado en el CSS). 


Esto posibilita que sea mucho más sencillo mantener 
el aspecto del sitio desde una ubicación central por- 
que, con tan solo actualizar el documento CSS, se 


SITIOS CON PLANTILLAS 


© 





e elco]: 


: Aroma Verde es una casa quinta con más de 300 m2 cubiertos, 

: con parque arbolado, con todo lo necesario para disfrutar al 

: máximo; es la perfecta combinación entre naturaleza y tranquilidad, 
¿a la cual le hemos sumado las comodidades necesarias para 

: brindar un servicio excelente. 


: Nuestra misión es integrar la actividad humana a la naturaleza. 


:Nuestra visión: "Crecer con nuestros clientes" es el objetivo que 
¿nos impulsa a innovar, investigar y proponer nuevas ideas. 


actualizan todas las páginas sin necesidad de tener 
que ir una por una para modificar sus características. 
La separación de contenido y formato también sim- 
plifica el código HTML, lo que disminuye el tiempo 
de carga en los navegadores. 


Con las hojas de estilo podemos controlar las pro- 
piedades de todos los elementos que componen una 
página (tablas, textos, imágenes, etcétera). De he- 
cho, podemos manipular muchísimas más caracterís- 
ticas de éstos mediante un archivo CSS que si se 
utiliza solo el código HTML. Las opciones para crear 






SE E LORIAN IROI LEIATE OKOA aa L TATER To AERO. EROR r Tei i 


mos con plantillas. Cuando tengamos que modificarlo ahorraremos tiempo y problemas, al 


no tener que abrir archivo por archivo para realizar el mismo cambio en todos. 
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un archivo de hojas de estilo se encuentran en el 
menú principal, en Texto/Estilos CSS. 


Básicamente, hay dos tipos de hojas de estilo: las 
externas y las internas. Las primeras son archivos 
separados con extensión .CSS y se pueden guardar 
en una subcarpeta dentro del sitio o junto con las 
páginas. Las segundas se insertan como código 
CSS dentro del encabezado del documento HTML, 
es decir, están incluidas dentro de la página web. 


Las hojas de estilo externas suelen ser más prácticas 
que las internas debido a que pueden vincularse a la 
cantidad que se desee de archivos HTML. De esta 
manera, podemos tener todos los estilos de nuestro 
sitio definidos en un solo archivo CSS, por más que 
tengamos 50, 100 o 1000 páginas web. 


Las hojas de estilo o USS 
[Cascade Style Sheets) 
son un grupo de reglas 
de formato que 
condicionan el aspecto 
del contenido de una 
pagina o sitio web 


En nuestro proyecto trabajaremos con archivos de 
hojas de estilo y allí veremos con más detenimiento 
sus propiedades, usos y características específicas. 


INSERCIÓN DE IMÁGENES 

Antes de repasar los pasos y las formas para inser- 
tar imágenes en un archivo HTML, conviene recordar 
que éstas siempre deben ser formato .GIF o .JPG. 
El primero se usa para imágenes pequeñas y de ba- 
ja calidad, como un fondo, y el segundo se usa para 
imágenes grandes y de alta calidad, como fotos. 


Antes de proceder a insertar una imagen en una 
de nuestras páginas web, debemos tomar la medida 
de la celda donde la colocaremos (con la regla del 
Dreamweaver). De esta manera, sabremos qué 
tamaño tiene que tener el archivo gráfico. 


») CREACIÓN DE HOJAS DE ESTILO 


Aunque Dreamweaver tiene un menú completo para la creación y la modificación de las hojas 
de estilo de nuestro sitio, también podemos modificarlas manualmente. Para esto debemos 
conocer el código CSS y su sintaxis. Ésta es muy parecida al HTML. 
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Hay tres maneras de insertar una imagen: con un clic 
en el sexto icono de la barra de herramientas hori- 
zontal (asegurándonos de seleccionar Imagen en el 
submenú), con CTRL+ALT+I o, en el menú principal, 
con Insertar /Imagen. Antes de colocarla debemos 
estar posicionados en la celda o tabla en donde de- 
seamos que aparezca (Figura 9). 


Una vez insertada en Dreamweaver, veremos que la 
imagen tiene las siguientes propiedades, entre otras: 


e Borde: el tamaño del borde de la imagen, medi- 
do en pixeles. Si no queremos que tenga borde, 
el valor debe ser 0. 

e Alt: texto alternativo de imagen que aparecerá si, 
en el navegador, nos colocamos encima con la 
flecha del mouse. Es el texto que aparece sobre 
fondo amarillo claro. 

e Vínculo: la opción para colocarle un vínculo a la 
imagen. En el caso de que tenga borde, éste 
adoptará el mismo color de un vínculo. 


el Seleccionar origen de imagen 


Seleccionar nombre 


Buscar en: 


Nombre Fecha dec...  Etiqu 


z=  — PA 


footer footerlat 


FIGURA 9. 
Vemos el menú 


Nombre: frentecasa 


de inserción de imagen, 


Quinta Aroma Verde_archivos 


etas Tamaño 


e Clase: la posibilidad de colocarle a una imagen 
una propiedad de hoja de estilo. 

e Mapa: con esta herramienta podemos crear sectores 
de la imagen que actúen como vínculos y hacer 
posible, así, que una imagen pueda vincular con 
más de un archivo a la vez. 


Durante el proyecto trataremos este tema varias ve- 
ces. En la Figura 10 podemos observar más de cer- 
ca las propiedades de la imagen. 


INSERTAR VÍNCULOS 

En HTML podemos vincular cualquier elemento de 
una página con otro archivo, ya sea dentro del mismo 
sitio o fuera de éste. Ésta es una de las características 
principales del protocolo HTTP. Para colocarle un 
vínculo (link) a un texto o a una imagen debemos mar- 
carlo/a o seleccionarlo/a. Una vez que lo hayamos he- 
cho, veremos la opción en la barra de Propiedades, 
donde tenemos que escribir el nombre del archivo 
con el cual queremos que el elemento vincule. 


© Sistema de archivos Raíz del sitio 


(5 Fuentes de datos 


Sitios y servidores 


Wista previa de imagen 


Y G T Y Ey 


Clasificación 


frentecasa 


350 x 263 JPEG, 28K ¿45 





Tipo: | Archivos de imagen (”.gif;”jpa;”jpeg;*.pna;”.psd) 





donde podemos buscar 


URL: Quinta 4roma Yerde_archivos*frentecasa.|pg 


el archivo deseado E 
elatiwa a: 


en las subcarpetas 
del sitio. 
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Quinta 4roma Yerde. htm 


Cambiar vínculo relativo en la definición del sitio. 


[Y] Vista previa de imagen 
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Repasaremos los tipos de vínculos: 


e Vínculo externo: nos permite dirigir al usuario a 
un sitio externo. Siempre debe ir encabezado por el 
protocolo HTTP, por ejemplo, www.hotmail.com. 

e Vínculo interno: nos permite dirigir al usuario a 
una página interna de nuestro sitio. Se debe escribir 
el nombre del archivo con su extensión, por ejemplo, 
index.html. Si se encuentra en una subcarpeta, 
deberemos colocar su nombre primero seguido 
de una barra invertida (archivos /index.html). 

e Vínculo de e-mail: abre una ventana del pro- 
grama de e-mail que tenga la PC del usuario 
(Outlook, etcétera) y le permite redactar un correo 
con la dirección ya colocada en el campo Para. 
Un ejemplo es mailto:nombreSdominio.com. 
Siempre debe escribirse el comando mailto: 
antes de la dirección. 

e Vínculo de ancla: permite dirigir al usuario a una 
locación específica dentro de la misma página web. 


vw Propiedades 


e Imagen, 28K An [350 


Al |263 Vínculo YO 


Mapa Espacio Y Destino 


K) O O Y Espacio H 


Origen |irchivos/frentecasa.jpa S% O 


Orig base YO 


En HTML podemos 
vincular cualquier 
elemento de una pagina 
con otro archivo 


Para programarlo necesitamos colocar un ancla en 
el lugar a donde queremos enviarlo, Esto se hace 
con el tercer icono de la barra de herramientas hori- 
zontal. Le colocamos un nombre (una sola palabra 
en minúscula), luego marcamos o seleccionamos la 
imagen o palabra que actuará como vínculo y, 
siempre encabezando con el símbolo +t, escribimos 
el nombre del ancla, por ejemplo, tarriba. 

e Vínculo de descarga: le permite al usuario 
descargar un archivo (de texto, de música o de video). 
Deberemos escribir la locación del archivo, por 
ejemplo, archivos/descargas/info.pdf, si 
es que está en nuestro sitio, en una subcarpeta. 


Alt Clase Ninguna 


Edición A I) N R 


Borde |2 


Alinear | Predeterminado v 





FIGURA 10. En la barra de Propiedades del Dreamweaver observamos las opciones para la imagen. 


RESUMEN 


Repasamos las herramientas y opciones básicas de Dreamweaver. Si bien volveremos 


sobre algunos temas tratados aquí y veremos muchos más, siempre es bueno comen- 


zar dando por sentado algunos conocimientos. 
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Multiple choice 


D 1 ¿Desde cuál de las siguientes 
opciones podemos obtener extensiones 
para el Dreamweaver? 

a- Comandos. 

b- Sitios. 

c- Ventana. 

d- Ayuda. 


P 2 ¿Desde cuál de las siguientes 
opciones podemos editar la hoja de estilos? 
a- Edición. 

b- Texto. 

c- Insertar. 

d- Modificar. 


p 3 ¿Cuál de las siguientes opciones 
permite insertar elementos de flash 

y otros programas externos? 

a- Herramienta de hipervínculo. 

b- Herramienta de correo electrónico. 

c- Herramienta de media. 

d- Herramienta de fecha. 
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D 4 ¿Cuál de las opciones permite visualizar 
el código HTML en la parte superior del área 

de trabajo y la vista de diseño en la parte inferior? 
a- Opción vista código. 

b- Opción vista dividir. 

c- Opción vista diseño. 

d- Opciones varias de visualización. 


p 5 ¿Cuál de las siguientes opciones 
permite visualizar herramientas de diseño, 
como reglas, guías, cuadrículas y otras? 

a- Opción vista código. 

b- Opción vista dividir. 

c- Opción vista diseño. 

d- Opciones varias de visualización. 


p 6 ¿Cuál de las siguientes opciones permite 
visualizar el código HTML en el área de trabajo? 
a- Opción vista código. 

b- Opción vista dividir. 

c- Opción vista diseño. 

d- Opciones varias de visualización. 


2-9 'pP-G 'q-y 0-€ q-2 “e-| :sejsandsay 
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Capítulo 2 


introducción 
a Fireworks 
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En este segundo capítulo, 
aprenderemos las herramientas 
y opciones básicas de Fireworks. 
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Introducción 
a Fireworks 


De la misma manera que hicimos con Dreamweaver, 
repasaremos los contenidos básicos de Fireworks. 
De esta forma, tendremos un punto de partida 
común para poder elaborar toda la parte gráfica de 
nuestro sitio web, en los siguientes capítulos. 


MENÚS Y BARRAS 

DE HERRAMIENTAS 

Con fines prácticos, dividiremos la interfaz de trabajo 
de Fireworks en cinco áreas. Esto nos ayudará a 
repasar mejor cada una de las partes y facilitará la 
posterior referencia a lo largo del libro. 


Menú principal 

Éste es el menú típico de cualquier programa, contro- 
la todo lo que se ve y lo que no se ve (Guía Visual 1). 
Desde aquí, se pueden crear y guardar archivos, 


Con fines prácticos, 
dividiremos la interfaz 
de trabajo de Fireworks 
en cinco áreas 


© 


MENÚS Y BARRAS 





ocultar o mostrar barras de herramientas, manejar las 
propiedades de la página, seleccionar efectos y másca- 
ras para imágenes, modificar sus atributos y controlar 
las características de los textos, entre otras opciones. 


Barra de herramientas vertical 

Es un menú gráfico/icónico (Guía Visual 2) que 
se encuentra a la izquierda del área de trabajo. 
Para aquellas personas que han trabajado con al- 
gún programa de edición de gráficos o fotos, como 
Illustrator o Photoshop, les será fácil reconocer 
varias de las herramientas que aparecen aquí. 


Área de trabajo 

Es el espacio de trabajo con nuestro lienzo y las herra- 
mientas básicas para controlar propiedades de visuali- 
zación e información de tamaños (Guía Visual 3). 
Recordemos que, todo aquello que dibujemos fuera 
del lienzo, existirá pero no se verá a la hora de 
exportar e insertar nuestras imágenes en el sitio web. 





Es muy probable que durante nuestro trabajo con Fireworks cerremos, sin querer, alguna 


barra de herramientas o algún menú de propiedades. Ante esta situación, debemos recordar 


que podemos recuperarlos rápidamente, gracias al botón Ventana del menú principal. 
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El menú principal de Fireworks 


W cber 0”0O E: uo al 10g 99” O O 
Archivo Edición Wer Seleccionar fear Texto Comandos Filtros Ventana Ayuda 


selecciona! 3 

| k k | # Original | E vista previa [2 copias HH 4 copias | 
LEM 
Mapa bits 


re. 
1 1 
n 1 
ri 
ir 
ii 


ai 





Archivo: podemos encontrar opciones para Crear, Abrir, Abrir reciente y Guardar 
archivos. Además, tendremos Importar, Exportar, y Vista previa en el navegador. 
Edición: hallamos las opciones de: Cortar, Pegar, Copiar, Buscar y reemplazar y Pegar 
como máscara, junto con las de selección y las de preferencias. 

ver: con esta herramienta, podemos seleccionar opciones para achicar o maximizar la visualización 
del documento, y para ver las cuadrículas y las líneas guía. 

Seleccionar: tenemos la posibilidad de crear selecciones, anularlas, controlar bordes 
de recuadros, suavizarlos y fundirlos. 

Modificar: con este menú, modificamos el tamaño de la imagen o del lienzo, y transformamos, 
organizamos y alineamos objetos, entre otras cosas. 

Texto: encontraremos las opciones para cambiar la alineación, la fuente y el estilo de los textos. 
Además, podemos controlar su orientación. 

Comandos: esta opción nos permite crear efectos para aplicar a los elementos —como por ejemplo, 
sombras—, convertir a escala de grises, crear un show de diapositivas, fundir imágenes y 
convertir a tonos sepia, entre otras cosas. 

Filtros: con esta herramienta,ajustamos el color de los objetos, los desenfocamos, los 
perfilamos y les añadimos ruido. 


Ventana: menú muy importante, desde el que podemos visualizar y ocultar las diferentes 
ventanas del programa con sus respectivas opciones. 
(10) Ayuda: encontramos el menú de ayuda del programa y su registro, entre otras cosas. 
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La barra de herramientas vertical de Fireworks 





W Adobe 


O Herramienta Puntero: selecciona un objeto en el área de trabajo. 
Archivo 


O Herramienta Subselección: esta opción la usamos para desplazar, 
seleccionar, o modificar puntos de un trazado vectorial o de un objeto 
que forma parte de un grupo. 

O Herramienta Escala: sirve para modificar el tamaño de un objeto, ya sea 
de manera proporcional o no. También podemos utilizarla para rotarlo. 

(4) Herramienta Recortar: la empleamos para recortar las partes que no 
deseamos de una imagen y para quedarnos con lo que sí deseamos. 

O Herramienta Recuadro: permite seleccionar áreas de pixeles específicas 
de una imagen de mapa de bits (dibuja un recuadro a su alrededor). 

O Herramienta Lazo: nos da la posibilidad de elegir pixeles específicos de 
una imagen de mapa de bits (sigue su contorno). 

O Herramienta Varita mágica: utilizamos esta alternativa para seleccionar 
áreas de pixeles de color similar, para luego alterar, por ejemplo, el color 
de fondo de una figura. 

O Herramienta Pincel: permite trazar pinceladas con el color de trazo o 
con el de relleno. Además, podemos seleccionar el tipo de trazo por utilizar. 

O Herramienta Lápiz: es útil para dibujar, a mano alzada, líneas de 
diferente grosor con el color de trazo que deseemos. 

(10) Herramienta Borrador: la usamos para eliminar pixeles. 

Herramienta Desenfocar: con esta alternativa, podemos dar mayor o 

menor nitidez a los pixeles que deseemos. 

Herramienta Sello: sirve para clonar parte de una imagen. 


P L) 
em 
B gB 


Herramienta Línea: para dibujar líneas rectas a mano alzada. 
Herramienta Pluma: nos da la posibilidad de continuar dibujando un 
trazado existente y añadir o quitar puntos de edición. 

© Herramienta Rectángulo: con ella podemos dibujar diversas formas 
geométricas y aplicarles el color de trazo y de relleno que deseemos. 


8009 


Herramienta Texto: permite insertar texto en el lugar que deseemos. 
Herramienta Estilo libre: para doblar y remodelar objetos vectoriales. 
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© Herramienta Cuchilla: con ella, podemos dividir un trazado en dos o más. 


© Herramienta Zona interactiva rectangular: la utilizamos para asignarle un vínculo web a 
una zona que seleccionemos en un objeto. 
© Herramienta División: la empleamos para dividir un objeto en distintas zonas que se guardan 
como imágenes independientes, y además podemos asignarles vínculos y comportamientos. 
Ocultar divisiones y zonas interactivas: oculta las divisiones y las zonas interactivas. 
Mostrar divisiones y zonas interactivas: muestra las divisiones y zonas interactivas creadas. 
Herramienta Cuentagotas: para seleccionar un color y duplicarlo en el trazo o en el relleno. 
Herramienta Cubo de pintura: permite seleccionar o aplicar el color de relleno a los objetos. 
Color de trazo: da la posibilidad de seleccionar o aplicar el color de trazo a los objetos. 
Color de relleno: igual que Herramienta Cubo de pintura. 
Herramienta Mano: la empleamos para mover el área de trabajo con todos sus elementos. 
Herramienta Zoom: con ella, podemos maximizar o minimizar porciones del área de trabajo. 


OOOO QOOO 


La Barra 

de herramientas 
vertical es un menú 
gráfico/icónico 





PUNTOS POR PULGADA 





Al tratar una imagen para que sea usada en un material gráfico, los diseñadores no la traba- 
jan en menos de 300 puntos por pulgada. No obstante, como estamos trabajando para la Web, 
lo haremos en 72, ya que se verá más que bien y el archivo pesará muchos menos KB. 
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El área de trabajo de Fireworks 


ireworks CS3 - [4 : Página 1 al 100% (Mapa de bits)] 
dición Ver Seleccionar Modificar Texto Comandos Filtros Ventana Ayuda 


4 
[J Original | 52] Vista previa []]2 copias H4 copias | 


Páginal + | 400x200 |100% ~ 





Vista original editable: es la vista predeterminada. Nos permite editar los objetos en el 
área de trabajo de la aplicación Adobe Fireworks. 

Presentación preliminar de la imagen: con ella vemos cómo quedará la imagen de acuerdo 
con el tipo de archivo gráfico —GIF o JPG— que utilicemos. 

Botón de administración de archivos: posibilita subir o bajar archivos de Fireworks del 
servidor. Solo funciona si el archivo tiene divisiones o zonas interactivas con vínculos. 
Exportación rápida: con esta opción, podemos exportar rápidamente la imagen, sin necesidad 
de pasar por selecciones de filtros ni otras opciones. 

Control de fotogramas: estos botones nos permiten reproducir un GIF animado, pasar al 
fotograma siguiente o anterior, e ir al primer o último fotograma de una serie. 

Tamaño de lienzo: nos muestra el tamaño del lienzo en pixeles. 


Nivel de aumento: desde esta opción, visualizamos el porcentaje de aumento con el que 
estamos viendo el documento. 
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Barra de propiedades 

La barra de propiedades se encuentra en la parte in- 
ferior de Fireworks y nos mostrará las propiedades 
del objeto que tengamos seleccionado en un deter- 
minado momento (Guía Visual 4). Desde aquí po- 
dremos manipular las características de todos los 


elementos de nuestro lienzo. Nos permitirá, entre 
otras cosas, modificar el tamaño y la transparencia de 
un objeto, agregarle tanto efectos como filtros, 
cambiar el color, la fuente y la orientación de la tipo- 
grafía, asignar vínculos a divisiones o zonas interacti- 
vas, y modificar las texturas y el color de bordes. 


La barra de propiedades de Fireworks 








y Propiedades 8 


7 (A ES 
Borde: rr Gi | Borde: e o i =| | Filtros: +, 


= o e lr o 


| Transparente 

O Ancho y alto de la selección: indica la altura y el ancho del elemento seleccionado. 

ð Posición X e Y de la selección: muestra la posición del elemento seleccionado, según las 
coordenadas X e Y del lienzo de trabajo. 

© Relleno y categoría de relleno: permite ver el color de relleno del objeto y controlar su tipo 
de efecto -degradado, patrón, tramado, entre otros. 

(4) Borde: con ella, controlamos el tipo de borde de un elemento. 

O Textura: la utilizamos para elegir la textura que deseemos para el relleno del objeto. 

O Color, tamaño y categoría del trazo: con esta herramienta, seleccionamos el color de 
borde, el tamaño y el tipo de trazo que vamos a utilizar. 

Q Textura del borde: con ella, podemos aplicar la textura que deseemos al borde del objeto, 
lo mismo que la herramienta Textura para el relleno. 





O Opacidad: permite controlar la transparencia del objeto seleccionado. 
O Filtros: empleamos esta opción, para añadir filtros de color, de sombras de iluminado 
y otros al objeto que seleccionamos. 
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Barra de ventanas 

La barra de ventanas se encuentra en el lado dere- 
cho de Fireworks (Guía Visual 5). Esencialmente, es 
un conjunto de varias ventanas que pueden 
abrirse, minimizarse y ocultarse para ayudarnos 
a controlar aspectos estructurales del programa y 
de los elementos del área de trabajo. Desde aquí, 
podremos, entre otras cosas, alinear los elementos 
consigo mismos o con el área de trabajo, controlar 
los fotogramas del documento, añadir, mover y eli- 
minar capas de dibujo, e insertar comportamientos a 
zonas marcadas con la herramienta División. 


PROPIEDADES DE ELEMENTOS 
Podemos dividir las propiedades de elementos en 
tres categorías, detalladas a continuación: 









NIVEL DE AUMENTO 


e Propiedades del área de trabajo: son las que 
controlan el lienzo y las características básicas 
que posee la imagen. 

e Propiedades de imagen: son las que tienen que 
ver con los objetos gráficos y controlan todas sus 
características (relleno, trazo, transparencia y otras). 

e Propiedades de texto: son las que controlan las 
características y la apariencia de los textos. 


Propiedades del área de trabajo 

Podemos acceder a éstas si hacemos clic con el 
mouse en cualquier parte del área gris que rodea 
nuestro lienzo. Nos permitirán controlar los aspectos 
generales de nuestro documento, relacionados con su 
tamaño y formato. Repasemos sus componentes: 


e Lienzo: nos permite elegir el color —pleno— del 
lienzo de trabajo. Lo podemos modificar en cual- 
quier momento, cuando sea necesario. 

e Tamaño del lienzo: sirve para cambiar el tamaño 
del lienzo —área de trabajo— cuando lo deseemos. 
La medida predeterminada está en pixeles. 


La barra de ventanas 
se encuentra en el lado 
derecho de Fireworks 





Es una herramienta importante y debemos tenerla presente ya que, cuando abrimos una 


imagen, Fireworks modifica su nivel de aumento para que quepa en su totalidad en el área 


de trabajo. Si no le prestamos atención, nos puede parecer más pequeña de lo que es. 
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La barra de ventanas de Fireworks 





aai © Alinear: encontramos diversas opciones de 
pomelie; alineación para ordenar los elementos del 
A área de trabajo. Éstas pueden ser aplicadas 
Alinear: con respecto al lienzo o con respecto a los 
Exa mismos elementos. 
Distribuir: (2) Fotogramas: desde esta opción, tenemos la 
T E = posibilidad de añadir, duplicar y eliminar 
Igualar tamaño: i fotogramas de nuestro documento. 
ol pE H O Comportamientos: en esta ventana, tenemos 
los distintos comportamientos y efectos que 


Y Fotogramas me E podemos utilizar sobre las áreas marcadas 
| con la herramienta División. 

O Capas: con ella, tenemos la posibilidad de 

añadir, duplicar y eliminar capas de dibujo 


Y, 6 Siempre de nuestro documento. 


__ Comportamientos (ED 


Eventos Acciones 


ASA 4 


| 100 |7 | Normal 





Fotograma 1 
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También podemos controlar si queremos agrandarlo 
o achicarlo desde un sector en especial -izquierda, 
derecha, superior o inferior- y dejar el resto intacto. 

e Tamaño de la imagen: usamos esta opción para 
modificar el tamaño de la imagen que visualizamos 
en el área de trabajo. Controla simultáneamente 
al tamaño del lienzo, ya que lo achica o agranda 
según el objeto que se encuentre en él, Si abri- 
mos una foto y cambiamos su tamaño, el lienzo 
se adaptará a éste. 

e Ajustar lienzo: con esta opción, podemos cam- 
biar automáticamente el tamaño del lienzo para 
que se adecue al de la imagen. Si tenemos un 
lienzo grande e insertamos una imagen pequeña, 
adoptará el tamaño de la imagen. 

e Opciones de exportación predeterminadas: 
desde aquí, tenemos la posibilidad de definir el 
tipo de archivo de exportación (GIF o JPG) que 
queremos utilizar para nuestro documento. 





LIENZO E IMAGEN 


Propiedades de imagen 

Son las propiedades que poseen los objetos gráficos 
dibujados en Fireworks. Accedemos a ellas al se- 
leccionar el elemento dibujado con la herramienta 
Puntero. Nos dan la posibilidad de controlar 
todos los detalles de las figuras y de las imáge- 
nes. Repasaremos sus componentes: 


e Color de relleno: es la casilla selectora de color 
que nos permite elegir el color de relleno de la 
figura. No tenemos esta opción en el caso de que 
el objeto sea una foto. 

e Categoría de relleno: nos sirve para seleccio- 
nar entre opciones de Sólido, Patrón y 
Degradado. De esta manera, podemos rellenar el 
objeto o figura con la que más nos guste (Figura 1). 

e Borde: la empleamos para seleccionar el tipo de 
borde de la figura u objeto. Podemos alternar 
entre Suavizado, Duro y Fundido. 

e Textura: la utilizamos para cambiarle la textura 
de relleno a un objeto o figura. Es un buen agre- 
gado para lograr elementos texturados. 

e Color de trazo: nos posibilita seleccionar el color 
de trazo del borde del objeto. 

e Tamaño de la punta: la usamos para seleccionar 
el grosor del borde de un objeto o figura. 

e Categoría del trazo: nos permite cambiar el 
tipo de trazo del borde del objeto. 






Es común pensar que lienzo e imagen son lo mismo, pero esto no es así. El lienzo es 


nuestra área de trabajo y puede ser modificado de forma totalmente independiente de 


la imagen. Lo mismo se aplica a esta última. 
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e Textura de trazo: la empleamos para seleccio- 
nar la textura, en caso de que deseemos una, del 
borde del objeto o figura. 

e Opacidad: con ella podemos controlar el grado 
de transparencia de un objeto. 

e Filtros: sirve para colocarle efectos de diferentes 
tipos a una figura u objeto. Es muy útil para lograr 
elementos más complejos y atractivos. 


Propiedades de texto 

Nos permiten controlar las características y apa- 
riencias de los textos que insertemos en el área 
de trabajo, siempre que sean escritos en Fireworks 
y no importados de otro archivo gráfico. Con ellas, 
podemos manejar distintas variables para mejorar 
la visualización y agregar efectos. A continuación, 
repasaremos sus componentes: 


e Fuente: la utilizamos para seleccionar la tipogra- 
fía con la que deseamos escribir el texto. Podemos 
cambiarla en cualquier momento. 


Pist interia 


Ficstas Temäticzs 


CATALINAS 
e Y; € IAN 


Congresos 
inauguraciones 


Eventos a Deneficio 
Markebng y Datrategias del omunicación 


Mingus 
Sido 
Trarnadó ib 
Deqriadado 
Faon 
Opciones de relleno. 

AAA AÁÁÁÁÁAA2 mA i 
Arrciómguda rez i l aiko 2 A r 


Boror- Sia E 
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e Tamaño: sirve para seleccionar el tamaño del texto 
en pixeles. Funciona de la misma manera que en 
cualquier procesador de textos. 

e Color: con ella, podemos elegir el color de texto 
que deseemos utilizar. 

e Negrita, cursiva y subrayado: para transformar 
el texto en negrita, cursiva o subrayarlo. 

e Ajuste entre caracteres: da la posibilidad de 
alejar o juntar los caracteres de las palabras entre 
sí. De esta forma, podemos crear un texto más 
o menos compactado. 

e Interlineado: la empleamos para separar O 
juntar las líneas de texto que tengamos. 

o Escala horizontal: permite agrandar o achicar 
el texto como si fuese un elemento gráfico. 

e Orientación de texto: con esta opción, pode- 
mos escribir en forma horizontal, vertical, 
de izquierda a derecha y de derecha a izquierda. 

e Alineación de texto: sirve para alinear el texto 
a la izquierda, al centro, a la derecha o justificarlo, 
como en cualquier procesador de textos. 


Family Day 
Exposiciones 


Deslller 


FIGURA 1. 
Las opciones de 


Conferencias 


Lyenbos Ciubdoor 


degradado abiertas en la 


Larramiento de Prensa 


Categoría de relleno. 
Podemos observar 

los diferentes tipos. 
Cada una nos permitirá 
agregar o quitar 

más colores y patrones 
al degradado. 
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e Opacidad: con ella, controlamos el grado de 
transparencia del texto seleccionado. 

e Filtros: la empleamos para colocarle efectos 
de diferentes tipos a un texto. 


FILTROS 

La opción Filtros, en el menú principal, nos permi- 
te agregar y modificar diferentes filtros para objetos, 
imágenes y textos. Es muy útil a la hora de probar 
distintas posibilidades de diseño, ya que también es 
muy sencillo eliminarlos una vez que han sido apli- 
cados. Se dividen en cinco tipos: Ajustar color, 
Desenfocar, Otro, Perfilar y Ruido. Á continua- 
ción, describiremos cada uno de ellos. 









PIXELES 


Ajustar color 

Estos filtros incluyen todas las variables de manipu- 
lación del color de la imagen. Con ellos, podemos 
cambiar intensidad, brillo, saturación, niveles, etcé- 
tera. Una vez que los seleccionemos y apliquemos, 
aparecerán en la ventana Filtros de la barra de 
Propiedades del programa. Allí podremos tener 
acceso para editarlos o para eliminarlos. 
Repasaremos los diferentes tipos: 


e Brillo/Contraste: permite modificar el contraste 
o brillo de los pixeles de una imagen. Afecta sus 
resaltados, medios tonos y sombras. Lo usamos 
para corregir imágenes demasiado oscuras o claras. 

e Curvas: lo utilizamos para ajustar cualquier color 
del rango tonal sin afectar el resto de los colores. 


La opción Filtros, 

en el menú principal, 
nos permite agregar 
y modificar diferentes 
filtros para objetos, 
imagenes y textos 


Cabe recordar que, como estamos trabajando para la Web, todas las medidas de nuestros 


archivos serán tomadas en pixeles. Si bien es la unidad de medida predeterminada de 


MINI RT E Mi EIEREN TOETER 
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Por ejemplo, lo podemos utilizar para corregir un 
destello de color producido por las condiciones de 
Iluminación de la imagen. 

e Invertir: lo usamos para cambiar los colores de 
una imagen por su color inverso de la rueda 
de colores, es decir, si lo aplicamos a una ima- 
gen roja, el color cambiará a azul. 

e Matiz/Saturación: brinda la posibilidad de 
ajustar el tono o matiz, la intensidad o satura- 
ción y la luminosidad de un color de una imagen. 

e Niveles automáticos: una opción muy útil, que 
nos permite hacer que Fireworks ajuste automáti- 
camente el rango tonal de una imagen. 

e Niveles: lo empleamos para corregir mapas de 
bits que contienen una alta concentración de pixe- 
les en resaltados, medios tonos o sombras. 


Desenfocar 

Estos filtros incluyen todas las variables de desenfoque 
de una imagen. Con ellos, podemos alterar los pixeles 
para crear efectos de velocidad y distorsión, entre 
otros efectos que estudiaremos en este apartado. 


Una vez que los seleccionemos y apliquemos, apa- 
recerán en la ventana Filtros de la barra de 
Propiedades del programa. Allí, podremos tener 
acceso para editarlos o para eliminarlos. Revisare- 
mos los diferentes tipos: 


NIVELES AUTOMÁTICOS 


e Desenfocar: permite suavizar el enfoque de los 
pixeles seleccionados. Si deseamos que se note, 
deberemos aplicarlo varias veces. 

e Desenfocar más: aplica el triple de desenfoque 
que si utilizáramos Desenfocar. 

e Desenfoque de movimiento: brinda la posibili- 
dad de generar un efecto de movimiento de la 
imagen. Podemos controlar el ángulo y la distancia. 

e Desenfoque de zoom: sirve para generar un efec- 
to de movimiento de la imagen, de forma que ésta 
parezca alejarse o acercarse. Podemos controlar 
la cantidad y la calidad. 

e Desenfoque gaussiano: lo utilizamos para pro- 
ducir un efecto de halo, ya que aplica una media 
de desenfoque a cada pixel. 

e Desenfoque radial: lo empleamos para producir 
un efecto de rotación de la imagen. 


Otro 

Dentro de esta opción, encontraremos dos filtros 
que tienen que ver con la aplicación de efectos tipo 
dibujo a una imagen. Básicamente, nos permiten 
modificar los pixeles de un archivo gráfico para que 
su apariencia parezca dibujada o para hacerlo trans- 
parente. Repasaremos los diferentes tipos: 


e Buscar bordes: nos permite alterar los mapas 
de bits para que parezcan dibujos lineales: 





Cada vez que abramos una imagen para comenzar a editarla, antes de efectuarle cualquier 


modificación, nos conviene seleccionarla y aplicarle el filtro Niveles automáticos. De esta 


manera, ya tendremos los tonos corregidos automáticamente por Fireworks. 
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Datos Útiles para 
CIR ASE 


Muchos diseñadores suelen menospre- 
ciar Fireworks, ya que argumentan que 
Photoshop es mucho mejor y tiene 
muchas más herramientas para trabajar 
imágenes. Lo cierto es que Fireworks es 
un editor de imágenes especialmente 
diseñado para la Web y que, además de 
trabajar mapas de bits, puede crear y 
A MANTA A 


Al igual que para los archivos HTML, 
debemos respetar los nombres en 
minúscula, sin tildes ni espacios para 
las imágenes que exportamos, ya que 
también serán subidas a Internet. 
Si no hacemos esto, nuestras imáge- 
nes pueden no verse correctamente 
o ni siquiera aparecer. 


Al igual que en Dreamweaver, en 
Fireworks se usa la paleta de colores 
RGB (rojo, verde y azul). Esto hace que 
TTT Mr EAEE e-Mail 
o editar imágenes y luego exportarlas 
para que sean insertadas en HTML. 





identifica las transiciones de color de las imáge- 
nes y las cambia por líneas. 

e Convertir en alfa: lo usamos para convertir un 
texto o una imagen en una transparencia, siempre 
en función de los valores de la imagen (Figura 2). 
Es una forma automática para hacer que una ima- 
gen se haga transparente sin utilizar Opacidad. 


Perfilar 

Estos son filtros muy útiles para corregir imágenes 
que estén desenfocadas, es decir, que hayan sido 
sacadas fuera de foco. Al usarlos podremos trabajar 


Repetir Convertir en alfa Ctri+ Alt+Mayús+X 


Ajustar color 


Desenfocar 


po ES NI | 
Otro Buscar bordes 
Perfilar Convertir en alfa 


Páginal +» !4 D € 





FIGURA 2. Podemos ver la opción 

Convertir en alfa aplicada a una imagen. 
Observamos que se puede ver parte del lienzo 
debido a la transparencia. 
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la imagen para mejorarla y así no tener que volver a 
tomarla -en el caso que sea una fotografía- o conse- 
guirla. Repasaremos los diferentes tipos: 


e Desperfilar máscara: nos permite enfocar la 
imagen mediante el ajuste del contraste de los 
bordes de los pixeles. Esta opción es la que nos 
ofrece el mayor control (Figura 3). 

e Perfilar: nos sirve para ajustar el foco de una 
imagen borrosa mediante el aumento del contraste 
de los pixeles adyacentes. 

o Perfilar más: igual que Perfilar, pero nos da 
la posibilidad de aumentar el contraste de los 
pixeles adyacentes casi tres veces. 


Ruido 

Esta opción tiene un solo filtro y sirve para distorsio- 
nar una imagen. Fundamentalmente, rompe los 
pixeles de un objeto para hacerlo poco claro y, 
depende de la cantidad, casi irreconocible. 








e Añadir ruido: permite crear variaciones de color 
aleatorias entre los pixeles de una imagen, para 
distorsionarla o crear el efecto de una foto anti- 
gua o arruinada por el tiempo. A lo largo del 
proyecto, veremos aplicaciones concretas de fil- 
tros y diversas formas de manejarlos. 


Desperfilar máscara (Es) 


| Aceptar 


Cantidad de perfilado: 


D 


Radio del píxel: 


Y 


Umbral: 


P 0 
) | [Y] Vista previa 


FIGURA 3. Conviene mantener un equilibrio 
entre la Cantidad de perfilado y el 
Radio del píxel para lograr un efecto realista. 


La opción ruido 

tiene un solo filtro 

y sirve para distorsionar 
una imagen 


») RESUMEN 


En este segundo capítulo, repasamos las herramientas y opciones básicas de Fireworks: el 
menú principal, la barra de propiedades y barras de ventanas. Además, estudiamos los 
siguientes filtros: ajustar color, desenfocar, perfilar y ruido. 
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Multiple choice 


D 1 ¿Con cuál de las siguientes herramientas 
creamos efectos para aplicar a los elementos? 
a- Seleccionar. 

b- Modificar. 

c- Comandos. 

d- Filtros. 


p 2 ¿Con cuál de las siguientes herramientas 
podemos ajustar el color de los objetos? 

a- Seleccionar. 

b- Modificar. 

c- Comandos. 

d- Filtros. 


D 3 ¿Cuál de las siguientes herramientas 
selecciona áreas de pixeles de color similar? 
a- Herramienta estilo libre. 

b- Herramienta sello. 

c- Herramienta varita mágica. 

d- Herramienta borrador. 
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[> 4 ¿Cuál de las siguientes herramientas 
permite eliminar pixeles? 

a- Herramienta estilo libre. 

b- Herramienta sello. 

c- Herramienta varita mágica. 

d- Herramienta borrador. 


p 5 ¿Cuál de las siguientes herramientas 
sirve para clonar parte de una imagen? 

a- Herramienta estilo libre. 

b- Herramienta sello. 

c- Herramienta varita mágica. 

d- Herramienta borrador. 


p 6 ¿Cuál de las siguientes herramientas 
permite doblar y remodelar objetos vectoriales? 
a- Herramienta estilo libre. 

b- Herramienta sello. 

c- Herramienta varita mágica. 

d- Herramienta borrador. 
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En este tercer capítulo, veremos 
los pasos para crear un diseño preliminar 
estático de nuestro sitio web. 


TIOS 


B 3 Diseño estático 








¿Por qué usar 
Fireworks para 
diseñar nuestro sitio? 


Un error común que mucha gente comete es em- 
pezar a trabajar directamente en Dreamweaver, es 
decir, luego de terminar con el proceso de 
desarrollo del árbol de sitio, van al programa 
mencionado y comienzan a crear tablas para 
armar el diseño y la estructura del sitio. Aunque 
para muchos ésta puede ser la forma adecuada 
de proceder, si la empleamos, es posible tener ciertos 
inconvenientes que hacen que no sea la más práctica. 


Supongamos que trabajamos en un proyecto que 





ANCHO DEL DISEÑO 


debe ser aprobado por un cliente. Muy probable- 
mente, nos pedirá un diseño preliminar de, por lo 
menos, la página inicial del sitio. Si nos tomamos el 
trabajo de crear todas las tablas necesarias con sus 
respectivas celdas, rellenarlas con contenido (texto e 
imágenes, entre otras cosas) y lo desaprueba, habre- 
mos gastado valioso tiempo en diseñar y programar 
la estructura de una página que finalmente será 
borrada. Además, lo más seguro es que, para poder 
contemplar posibilidades, no nos pida solo un dise- 
ño, lo que empeorará aún más la situación. 


Sin ir más lejos, nos puede pasar lo mismo al tra- 
bajar en nuestro propio proyecto. Podemos 
comenzar a diseñar directamente en Dreamweaver y 
tener que hacer varias pruebas hasta quedar con- 
formes, con lo que también caemos en esa pérdi- 
da de tiempo y de archivos que terminarán en la 
basura. La mejor solución para esto es crear, 
primero, un diseño estático preliminar de nuestro 
sitio en Fireworks, o sea, una imagen. Existen cier- 
tos puntos a favor de esta manera de proceder: 


1) Trabajamos en un programa de edición de imá- 
genes. Esto permite gran flexibilidad y libertad. 

2) No tenemos que insertar tablas con celdas. Nos 
manejamos directamente con imágenes y elementos 
de diseño, lo que es más cómodo y nos ahorra tiempo. 





En el proceso de diseño de un sitio web, importa más el ancho que el alto. Esto se debe a las 


barras de desplazamiento de los navegadores. Todos los usuarios de Internet estamos acos- 


tumbrados al desplazamiento vertical, y el horizontal nos resulta muy incómodo. 
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3) Agregamos, movemos y eliminamos elementos con 
facilidad. Podemos arrastrar cualquier componente de 
nuestro diseño con el mouse, crearlo de la misma 
manera y eliminarlo con solo marcarlo y apretar SUPR. 
4) Lo visualizamos como una imagen. Podemos 
exportar un archivo JPEG o GIF y verlo como una 
simple imagen, liviana y fácil de transportar 
o enviar por e-mail. 


¿Esto significa que nos podemos olvidar totalmente 
de Dreamweaver y diseñar como nos plazca? No, 
significa que tenemos mayor libertad y facilidad, pero 
no son totales. Siempre debemos tener en cuenta que, 
finalmente, colocaremos el diseño en tablas y celdas 
de Dreamweaver. No nos olvidemos de este hecho 
mientras diseñamos ya que, si no, podemos hacer 
cosas que luego sean imposibles de adaptar. Veremos 
bien los detalles a lo largo de este capítulo. 


COMPONENTES 

ESTRUCTURALES Y DE CONTENIDO 
Debemos comenzar por diferenciar aquellos compo- 
nentes que serán estructurales y aquellos que serán 
de contenido. Los primeros están asociados con los 
cimientos de nuestro sitio y son su base, suelen ser 
más estáticos y repetitivos. Algunos ejemplos 
pueden ser: encabezado, pie de página, barra de 
navegación, líneas de división entre componentes y 
espacio para banners. Los segundos están asociados 
con elementos más cambiantes, dinámicos y confor- 
man el relleno de nuestro sitio. Ejemplos de éstos 
son: textos, imágenes, gráficos y banners. 


Ambos están muy relacionados y siempre conviene 
pensarlos en conjunto, no obstante, los trabajare- 
mos por separado. Primero nos concentraremos en 
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Un error común 

que mucha gente 
comete es empezar 

a trabajar directamente 
en Dreamweaver 


los componentes estructurales porque nos darán la 
forma de los de contenido. 

Comenzaremos por el encabezado y la barra de 
navegación. Para InterWeb (nuestro proyecto) 
trabajaremos un diseño con barra de navega- 
ción horizontal justo debajo del encabezado. 
Abriremos Fireworks y seleccionaremos en el me- 
nú principal Archivo/Nuevo (Figura 1). 


Es fundamental el tamaño de lienzo que elijamos. 
Lo más conveniente es que tenga, aproximada- 
mente, el mismo que la página en Dreamweaver. 


Nuevo documento EX] 


Tamaño del lienzo: 2. 1M 


Anchura: 900 


| Pixeles Y An.: 900 
Pixeles v Al.: 600 
Pixeles/pulgada v 





Altura: 600 
Resolución: 72 
Color del lienzo 
(0) Blanco 


C) Transparente 


C) Personalizado: 


E 
| Aceptar Cancelar 


FIGURA 1. La ventana de propiedades para 
configurar el área de trabajo sobre la que 
desarrollaremos nuestro diseño estático. 
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En nuestro caso será de 900 pixeles de ancho por 
600 de alto, ya que la mayoría de las resoluciones 
de pantalla de hoy en día están preparadas, por lo 
menos, para 1024 x 768 pixeles. 


Nunca conviene usar el ancho y el alto total (sobre 
todo, el ancho) debido a que las pantallas son 
diferentes, además de que las barras verticales y 
horizontales de las ventanas achican el espacio dis- 
ponible. Una buena resolución estándar para diseñar 
páginas web actualmente puede ser 950 pixeles 
de ancho por 600 de alto. La altura puede variar, 
ya que todos los usuarios están acostumbrados a 
la barra de desplazamiento vertical. 


Diceña png" 


g Oripa apoia [L] epis EE capir 


FIGURA 2. 

El color que usemos 

no importa porque 
después reemplazaremos 
la figura por el diseño 
correspondiente. 


COLORES 


© 


Lo primero que haremos será delimitar los espacios 
que ocuparán nuestros diferentes componentes y 
luego comenzaremos a diseñarlos. El área destinada 
al encabezado será de 900 pixeles de ancho por 70 
de alto (Figura 2). Utilizaremos la Herramienta 
Rectángulo para dibujar un rectángulo. 


El espacio de la barra de navegación tendrá 880 pi- 
xeles de ancho por 60 de alto (Figura 3). Emple- 
aremos un color diferente para el rectángulo, así lo 
diferenciamos del encabezado. Lo colocaremos 
justo debajo del otro, sin dejar espacio. 


Ahora seguiremos con el pie de página, las líneas 
divisorias y el espacio para banners. En el caso 









En la mayoría de los casos, se usa la gama de colores corporativos de la empresa o insti- 


tución en el sitio web. Siempre nos debemos asegurar de usarlos de tal manera de que no 


dificulten la legibilidad o la navegabilidad de los elementos de la página. 
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FIGURA 3. Hemos dejado un pequeño espacio 
de 10 pixeles a cada lado para insertar 
otros elementos de diseño. 


del primero, destinaremos un espacio de 880 pixeles 
de ancho por 40 de alto. Al igual que hicimos con el 
encabezado, usaremos la Herramienta Rectángulo 
para dibujar una figura que cubra el área en cues- 
tión. Las líneas divisorias (Figura 4), que medirán 
10 pixeles de ancho por 530 de alto aproximada- 
mente (o lo necesario para cubrir la altura), cumpli- 
rán, más que nada, una función decorativa. 


También le darán un poco de aire al diseño porque 
crearán una sangría tanto en el margen izquierdo 
como en el derecho. Dibujaremos una de ellas con la 
misma herramienta anterior, la copiaremos (CTRL+C 
o Edición/Copiar) y la pegaremos (CTRL+V o 











FONDOS TIPOGRÁFICOS 


FIGURA 4. 

Las líneas divisorias, 

una a cada lado. Si hemos 
usado borde en alguno 
de los rectángulos, 

puede ocurrir que 

sus medidas de ancho 

y alto se vean alteradas 
por algunos pixeles. 


Más de una vez, podemos encontrarnos con un sitio web que tiene fondos trabajados 


con tipografías en lugar de con patrones de dibujo. A pesar de ser interesante, la idea 


no es muy conveniente si diseñamos un sitio con mucho contenido textual. 
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Edición/Pegar), para luego arrastrarla al otro lado. 
Colocaremos el espacio que corresponde a los banners 
en una columna a la derecha, que ocupará toda la 
altura disponible entre la barra de navegación y el 
pie de página. Su ancho será de 200 pixeles. Ahora 
pasaremos a los componentes de contenido. Por el 
momento, los ¡lustraremos de manera muy básica, 
ya que avanzaremos más sobre ellos en las 
siguientes secciones del capítulo. Comenzaremos 
por la zona destinada al texto, que está conforma- 
da por el rectángulo blanco que se encuentra a la 
izquierda del área de los banners. 


Aquí debemos decidir en cuántas columnas y filas 


Diseñopng* 


dividiremos nuestro texto. Para el caso de InterWeb, 
en este diseño tipo, usaremos dos y dos. En la primera 
fila, las columnas estarán unidas para poder escribir el 
título y, en la segunda, las mantendremos separadas 
para el contenido. Nuevamente, con la Herramienta 
Rectángulo, dibujaremos el rectángulo correspon- 
diente a la primera fila y luego los pertenecientes 
a las dos columnas de la segunda. El ancho de la 
primera fila será, aproximadamente, de 650 pixeles 
por 50 de alto. Los rectángulos de la segunda tendrán 
300 pixeles de ancho por 330 de alto (Figura 5). 


Ahora utilizaremos la Herramienta Texto para 
agregar texto de muestra. Haremos esto para tener 


F Original | ED vista previa [172 copias EEJ4 coplas 


FIGURA 5. 

Es bueno dejar márgenes 
entre las áreas, ya que 
actuarán como sangría 
para separar el escrito. 


TIPOGRAFÍA 


© 








Si bien podemos utilizar la tipografía que deseemos para los textos de muestra, todo aquello 
que escribamos como texto en HTML debe llevar tipografía básica (Arial, Times New Roman, 


Courier New, Georgia o Verdana), porque HTML trabaja con la tipografía del equipo del usuario. 
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una idea de cómo se verá el texto insertado en nues- 
tro diseño. La tipografía, el color y el tamaño podrán 
cambiar una vez que apliquemos los ajustes en 
Dreamweaver, con lo que esto es solo preliminar. 
En el espacio destinado al título, escribiremos 
Título de muestra (Figura 6). Emplearemos ti- 


Diseño.png* 
J Orginal | E Vista preria [172 copias EXJ4 copias 


Titulo de muestra- 


ORIGINALES DE FIREWORKS 





Ahora utilizaremos 
la Herramienta Texto 
para agregar texto 
de muestra 


pografía Calibri con alineación izquierda, color 
blanco, tamaño 32 en negrita. 

Puede ser perfectamente reemplazada por una 
Arial o Verdana. Para colocar contenido de muestra 
en las columnas correspondientes al texto, utilizare- 
mos una herramienta muy útil que tiene Fireworks 


FIGURA 6. 

Si deseamos, 

para separar más las 
letras, podemos utilizar 
la herramienta Ajuste 
entre caracteres, 

que se encuentra 

en la barra 


Página 1 + : de Propiedades. 





Si bien podemos exportar nuestro diseño preliminar estático y transformarlo en JPEG o GIF, 
siempre debemos guardar el original de Fireworks (PNG). Si no tomamos este recaudo, 
no podremos volver a editar nuestro diseño si deseamos modificar algún elemento. 
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y que encontraremos en Comandos /Texto/Lorem 
ipsum. Al aplicarla, aparecerá automáticamente un 
cuadro con texto en latín, el que se usa en entregas de 
diseño gráfico y web, muy útil para nuestro relleno. 


Seguramente, deberemos cambiar el tamaño del 
cuadro de texto: seleccionaremos el cuadro con 
la Herramienta Puntero y, desde la barra de 
Propiedades, modificaremos el tamaño de la tipo- 
grafía. En nuestro caso, colocaremos Arial, tama- 
ño 18, y alineación izquierda (Figura 7); quitaremos 
la negrita (si tenía). Posiblemente, debamos cambiar 
el formato del cuadrado de texto para que 
entre en la columna. Esto también lo hacemos con 
la Herramienta Puntero, que podemos utilizar 
para achicar uno de los costados. 


Para que quede parejo, copiaremos el cuadro de texto 
con CTRL+C y lo pegaremos con CTRL+V. Así, se pe- 
gará en el mismo lugar del otro. Lo único que haremos 
será arrastrarlo con la Herramienta Puntero y po- 


sicionarlo en la otra columna. Ya tenemos nuestra 
base general lista. Avanzaremos con otros elementos. 
COLORES Y TIPOGRAFÍAS 

Éste es un punto muy importante, ya que permitirá 
que el contenido de nuestro sitio pueda visualizarse 
correctamente y su lectura sea agradable. Además, 
también influyen ciertos detalles técnicos que revi- 
saremos. Comenzaremos con algunas reglas gene- 
rales con respecto al texto. 


e Máxima legibilidad: tenemos que preocuparnos, 
en todo momento, porque se pueda leer y ningún 
elemento interfiera con su lectura. 

e Tamaño adecuado: debe tener un tamaño lo 
suficientemente grande para ser legible, pero no 
puede ser demasiado exagerado, ya que resulta 
incómodo y poco estético. 

e Sangrías: hay que mantener una separación 
adecuada entre los textos de nuestras páginas. 

e Colores fuertes: es conveniente evitar los colores 
fuertes cerca de áreas de texto. 


(Ficha ra do ER [Daño SE Pipina 1 Bi TOFS florin ipren doia ph] 
lácón Ver Íeleogar Medicar Teto Lomardoa ina Verna Ayuds 
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de Propiedades. 
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e Tipografías claras: debemos cuidarnos de usar 
aquellas que puedan resultar poco claras. 

Para lograr legibilidad, tenemos que procurar que el 

color de nuestra tipografía no sea similar al color de 

fondo o al de alguna imagen o figura que haya cerca. 

También debemos asegurarnos de que el texto no sea 

bloqueado por otros elementos de nuestro diseño. 


A veces, ocurre que el tamaño de la letra es muy 
pequeño. Esto, indudablemente, interferirá con la 
lectura de los usuarios porque les costará mucho 
más leer nuestro contenido. Un tamaño ideal es 12. 


Los espacios entre los textos (la sangría) son muy 
importantes porque les dan aire y facilitan su lectu- 
ra. A ningún usuario le gustan los bloques pegados 
que parecen no tener ni comienzo ni fin. 


Otro problema son los colores fuertes, sobre todo 





cuando se usan como parte del fondo. Lo ideal, 
siempre, son los tonos pasteles. Si por alguna razón 
queremos o debemos usar tonalidades intensas, O 
una imagen muy fuerte, tenemos que controlar 
que esté lo suficientemente separada del texto 
para no provocar ruido. 


Muchas veces, por una cuestión de diseño, queremos 
emplear tipografías originales o modernas. Esto puede 
provocar dificultades en la lectura, especialmente si la 
letra se encuentra un poco deformada o cortada. 
Para los textos, siempre tenemos que utilizar las más 
claras, pero los títulos sí pueden tener alguna forma 
un poco más osada y extraña. 


Un tema que hay que tener muy en cuenta es el es- 
tilo que le queremos dar a nuestro proyecto. De 
acuerdo con la tipografía y con el color que emplee- 
mos, el sitio tendrá una apariencia más seria o más 


Para lograr legibilidad, 
tenemos que procurar 
que el color de nuestra 
tipografía no sea similar 
al color de fondo 


») BANCOS DE ESTILOS 


Hay sitios en Internet que ofrecen a los usuarios una gran cantidad de estilos para des- 
cargar. De esta manera, en forma gratuita o por un precio módico, un diseñador puede 
bajarse archivos CSS para usar en sus páginas. 
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casual. A continuación, podremos observar algunos 
ejemplos que reflejan la diversidad que hay. 

En el caso del Banco Santander Río (Figura 8), 
vemos el marcado uso de blancos y grises. Aunque 
hay rojo, se encuentra en un tono oscuro, que Opa- 
ca su fortaleza. Esta combinación, junto con una 
tipografía clásica sin serif, le da al sitio un perfil 
institucional muy marcado. 


Con Turbo Master podemos observar un sitio más 
fuerte, con más carga gráfica y color (Figura 9). Si 
bien estamos frente a un diseño corporativo, apre- 
ciamos que está más volcado hacia la venta, ya que 
tiene diversos componentes que llaman la atención 
y resultan atractivos para la vista. Con respecto a la 


tipografía, vemos unos tres diferentes tipos sin serif, 
lo que genera una sensación de mayor flexibilidad. 
Junto con las formas y líneas, los colores violáceos 
de diferentes tonalidades nos dan un efecto que mar- 
ca, gracias a la tipografía con serif del encabezado, se- 
riedad. Pero a la vez, los diferentes elementos gráficos 
flexibles y la tipografía sin serif nos muestran soltura y 
dinamismo, que connotan entretenimiento. 


En el caso de InterWeb, como se trata de una 
empresa de multimedia y hosting, la intención 
será darle un aire de seriedad e institucionalidad. 
En este sentido, evitaremos los colores fuertes 
y los tipos de letras alocados o demasiado moder- 
nos. Esto lo trabajaremos en profundidad en el 


w de | Banco Santander Río. Ahorro con Tarjetas de cré... | | 
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FIGURA 8. 
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Pequeñas formas geométricas de colores livianos y suaves pueden agregar un toque visual 


con buen estilo a un sitio. Líneas curvas, triángulos, círculos, partes de figuras y contornos, 
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A 


capítulo siguiente, cuando comencemos a diseñar 
los elementos gráficos concretos. 

Cabe aclarar que, al referirnos a tipografía con 
serif, hablamos de fuentes como Times New Roman, 
Georgia o Courier New. Su característica principal 
es poseer remates en la parte inferior de cada letra, 
como una pequeña especie de subrayado propio. 


Denotan seriedad y se usan en diseños clásicos y 
más bien estáticos. Por otro lado, se encuentran 
aquellas sin serif, como Arial, Verdana o Calibri, 
que no tienen esos remates y denotan mayor flexibili- 


Cabe aclarar que, 

al referirnos a tipografia 
con serif, hablamos 

de fuentes como 

Times New Roman, 
Georgia o Courier New 
RedUSERS: 
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FIGURA 9. 

Sitio de Turbo Master, 
empresa dedicada 

a la fabricación 

y el mantenimiento 

de turbos para vehículos. 
Ms Vemos más imágenes 

de productos y un diseño 


más cargado. 


dad. Hoy en día, son las favoritas para diseños web 
modernos que mantienen un toque de seriedad. 
FONDOS 

Aunque no lo parezca, éste es un tema muy discutido. 
Hay quienes argumentan a favor del uso de fondos 
trabajados (generalmente, composiciones gráficas) 
para lograr acentuar la sensación que se desea 
transmitir a través del diseño, y hay quienes 
consideran que un fondo pleno (del color que sea) 
es más conveniente a tal efecto. 


Lo cierto es que, en última instancia, todo es cues- 
tión de gustos y de personalidades. El cliente para el 
que uno puede trabajar también influye mucho en 
este aspecto, pero si la decisión está bien argumen- 
tada, el diseñador casi siempre tiene la palabra fi- 
nal. Primero, veremos los diferentes tipos de fondos 
que se pueden aplicar a un sitio web: 


e Fondo pleno: el blanco cuenta como tal. 
Usualmente, se trata de que sean colores pasteles 
que permitan una buena legibilidad del contenido. 
Si no se usa el blanco, suelen elegirse amarillos, 
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verdes o azules muy claros. El gris claro también 


es una muy buena opción. 


e Fondo trabajado: se caracteriza por tener un 
patrón de dibujo repetitivo (Figura 10). Pueden 
ser líneas, pequeñas formas o dibujos, u otros ele- 
mentos. También se lo conoce como wallpaper. 
Se suele emplear a nivel institucional y, si está 
bien trabajado, puede ampliar el atractivo visual 


y facilitar la lectura. 


e Fondo de imagen: tiene una imagen que cubre 


su totalidad o su mayor parte. Ésta debe ser lo 


suficientemente transparente como para no difi- 
cultar la legibilidad del texto y, generalmente, está 
trabajada con algún filtro de color (Figura 11). 
Este tipo no es muy utilizado porque, si no está 
bien trabajado, genera problemas de lectura, y no se 
lo considera demasiado institucional. 


ps CARITAS 
| Sw Lomas de Zamora 


“El amor necesita una organizaci 


FIGURA 10. 

Aunque el fondo 

del contenido es pleno, 

si se observa bien, 

se verá que a su alrededor 
hay patones de líneas 
negras con relleno gris. 

El efecto es 

muy institucional. 


FIGURA 11. 

Apreciamos un filtro 

de color aplicado sobre 

la imagen. También vemos 
que se dificulta un poco 

la legibilidad de la barra 
de navegación. 
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Fondo trabajado 


Sin título-2.png 
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En Fireworks, vaya a Archivo/Nuevo y cree un lienzo de 40 pixeles de ancho por 
40 de alto. Color de fondo blanco y resolución de 72 pixeles por pulgada. 
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Con la Herramienta Rectángulo, dibuje un cuadrado que cubra todo el lienzo 
(40 x 40) y, con la Herramienta Cubo de pintura, píntelo de color gris (4999999). 
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Con la Herramienta Puntero, haga clic sobre el cuadrado y seleccione la opción 
Textura, en la barra de Propiedades. Allí, seleccione Línea-Horiz 3. 


Ji gris + A 
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Ahora vaya a Archivo/Guardar para guardar el archivo como un original PNG 
de Fireworks, en la carpeta Originales. Guárdelo con el nombre que desee. 
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Para exportarlo, vaya a Archivo/Presentación preliminar de la imagen. 
En la ventana, seleccione GIF WebSnap 256 en Configuraciones guardadas. 


" dra 


Fecha de caprhiotó [Eiquétsi Tirado Clifación 





En esta ventana, seleccione la subcarpeta gif dentro de la carpeta img 


y guárdelo con el nombre que desee. 
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En el Paso a paso 1, explicaremos cómo crear un fon- 
do trabajado tipo wallpaper para aplicar a un sitio. 

El fondo que acabamos de armar es simplemente 
una muestra del tipo trabajado. A pesar de guardarlo 
como corresponde, tanto el archivo original como el 
exportado, quizá no lo usemos en nuestro proyecto, 
pero la práctica nunca viene mal. En el siguiente capí- 
tulo, volveremos sobre el tema y seguramente diseña- 
remos algunos fondos para usar en nuestro proyecto. 


IDENTIFICACIÓN DE PARTES 

PARA LA CREACIÓN DE PLANTILLAS 
Y HOJAS DE ESTILO 

Es fundamental, durante el armado del diseño está- 
tico preliminar de nuestro sitio, identificar las partes 
que mantendrán el aspecto estético en todas las pá- 
ginas y la cantidad de estilos que usaremos de 
acuerdo con el contenido. Como ya habíamos visto 
en el Capítulo 1, las plantillas son un tipo de archi- 





MEZCLA DE FONDOS 


vo que nos permite crear un diseño de página fijo, 
porque podemos seleccionar cuáles de sus sectores 
o regiones pueden ser modificables. Las hojas de 
estilo son un conjunto de reglas de formato que con- 
figuran el aspecto del contenido de una página web 
y hacen posible que sea práctico y fácil mantener el 
aspecto del contenido del sitio. 


Plantillas 

Primero empezaremos por las plantillas. Para esto, 
identificaremos cuáles son las partes que permane- 
cerán estáticas y cuáles no. Revisaremos nuevamen- 
te nuestro diseño estático preliminar. Recordemos 
que las plantillas nos ahorrarán mucho tiempo a la 
hora de efectuar modificaciones, por eso es bueno 
que tengamos una idea con anticipación de cómo 
las aplicaremos. Podemos observar con una pasada 
de vista rápida que hay, básicamente, tres partes 
que quedarán iguales en todas nuestras páginas: 


Las hojas de estilo son 

un conjunto de reglas 

de formato que configuran 
el aspecto del contenido 
de una pagina web 






Por supuesto que, si uno lo desea y si el tipo de sitio lo permite, se puede armar un fondo que 


lleve una mezcla de los tres tipos vistos. En este caso, deberemos tener mucho cuidado, ya 


que es muy posible que si descuidamos detalles, perjudiquemos seriamente la legibilidad. 
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el encabezado, la barra de navegación hori- 
zontal y el pie de página. 

En el caso del primero, por una cuestión institucional, 
debe repetirse en todas las páginas, o por lo menos, 
en la gran mayoría. Con respecto a la segunda, 
es fundamental que el usuario tenga la posibilidad 
de moverse de un lado a otro en el sitio, por eso 
debe estar en todos los archivos HTML y en la misma 
posición, por una cuestión de orientación. En cuanto 
al tercero, tendrá los datos principales de contac- 
to de InterWeb, como el teléfono y el e-mail, entre 


otras cosas, por lo que también tiene que estar 
en todos los documentos. 

Además, podríamos tener en cuenta el espacio desti- 
nado a los banners, ya que aunque pueden cambiar, 
seguramente el área donde aparecen seguirá siendo la 
misma. Por ahora, basta con recordarlo. Si prestamos 
atención a algunos ejemplos de sitios en Internet, 
veremos que las partes que mencionamos que 
quedarán fijas son las que también se mantienen 
en éstos (Figuras 12 y 13). Las plantillas también 
pueden usarse perfectamente en sitios diseñados 
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a FIGURA 12. 

Sitio web de la empresa 
; Quinta Aroma Verde, 
Quienes somos . , 
casa quinta de alquiler. 
Si observamos el 
encabezado, la barra 
de navegación y el pie 
de página, veremos 
que se repiten 


en todas las secciones. 





Siempre es mejor pensar o contar más estilos de los necesarios para un sitio. De esta mane- 
ra, prevenimos la posible inserción de elementos. Por ejemplo, si bien mencionamos un pie 


de foto, quizá no lo usemos, pero por las dudas está y, en última instancia, se borra. 
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Quienes Somos Eventos 


a DS 


FIGURA 13. 

Mismo sitio web, diferente 
sección. Las partes son partcpantes 
iguales. Si no estuvieran 
diseñadas con plantillas, 
se deberían cambiar 
página por página, en caso 
de una modificación. 


con marcos, si bien éstos pueden cumplir un buen 
trabajo de reemplazo. 


En el ejemplo del Instituto Acton (Figuras 14 y 15) 
podemos notar que el encabezado y la barra de na- 
vegación están en diferentes marcos. En este caso, 
ambos pueden reemplazar, perfectamente, a un 
documento basado en una plantilla con esas partes 
fijas. No obstante, no siempre es así ya que, muchas 
veces, los marcos se usan para mantener una buena 


Servicios 


Eventos Sociales vent 





Clientes AA Contacto 
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pedo 


Eventos Y 


La dare para el tuño de un evento es la buena onda de la gente, tanto de los que estamos arás de la escena como la de los 


mpresarial 


Alquiler 


navegabilidad del sitio porque posibilitan, entre 
otras cosas, que la barra de navegación sea horizon- 
tal o vertical y esté visible todo el tiempo. 

Hojas de estilo 

No es tan necesario revisar visualmente nuestro di- 
seño estático preliminar, para estimar la cantidad de 
estilos que podemos llegar a necesitar. Con pensar 
en los diferentes textos que tendremos, es suficien- 
te. Recordemos que un archivo CSS puede contener 
una cantidad indefinida de estilos, por lo que no 
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FIGURA 14. 
Sitio web del Instituto 


A] 
Lord Acton 


Acton Argentina. y 


E TAE] 


Si deslizamos el marco 


Formación 
n Económica 
derecho de la pagina 

Empresa y Fe 
principal hacia abajo, T ai 
Aid 
Escolástico 


veremos el pie de página. 
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necesitaremos más que uno. En InterWeb debemos 
contemplar títulos, subtítulos, textos, pie de foto, 
vínculos, vínculos de sustitución, vínculos activos 
y vínculos visitados, como mínimo. En cada caso, 
definiremos la tipografía, el tamaño, el grosor, la 
alineación, el color y algunos otros detalles más. 


POSIBILIDADES DE ADAPTACIÓN 

DE ELEMENTOS GRÁFICOS 

A TABLAS Y CELDAS 

En el capítulo siguiente, comenzaremos a diseñar los 
elementos gráficos estáticos concretos de InterWeb. 
Antes, conviene dedicarles unas líneas a ciertas con- 
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FIGURA 15. 

Mismo sitio web, 
diferente sección. 

Si volvemos a deslizar 
el marco derecho 
hacia abajo, veremos, 
nuevamente, el pie 
de página repetido. 
Buen lugar para usar 
una sección fija 

de plantilla. 


sideraciones muy importantes, que debemos tener 
en cuenta para no toparnos con sorpresas en el 
trabajo. En Dreamweaver, todo va dentro de tablas. 
Cualquier diseño que pensemos en la etapa prelimi- 
nar debe ser modular. Si repasamos lo que hemos 
hecho hasta ahora en Fireworks, veremos que no 
hay curvas. Esto se debe a que no se pueden aplicar 
curvas o bordes redondeados en HTML, excepto si es 
una imagen, aunque también deberá ir dentro 
de una tabla (Figura 16). 


Usemos imágenes para recuadros y fondos con 
bordes redondeados. Si deseamos aplicar cierto 








FIGURA 16. Si prestamos atención a la barra de navegación de Catalinas Eventos, veremos que está 


encajada dentro de una tabla. Como es una imagen, tiene curvas, líneas y un diseño estético. 
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diseño de bordes y contornos a fondos y recuadros 
de texto, deben ser imágenes insertadas dentro de 
una celda o como fondo de ésta. Los bordes de las 
celdas y tablas son ángulos cerrados de 90*, la única 
forma de cambiar esto es a través de una figura gráfi- 
ca trabajada en Fireworks (Figura 17). 





P 





M a [100% v| SE 61K/9s 
FIGURA 17. El borde con puntas 
redondeadas del recuadro de Staff 
de Catalinas Eventos es un una figura 
insertada como fondo en la celda de la tabla. 


Tengamos especial cuidado con los separadores en- 
tre espacios (Figura 18). Muchas veces, se tienden 
a diseñar en forma de rectángulos o de líneas deco- 
radas. Probablemente quede muy estético, pero es 
complicado para aplicar, ya que debemos destinar 
una celda o una tabla a tal efecto. Además, tenemos 
que considerar que esa celda o tabla tiene su respec- 
tivo relleno y espacio, lo que también influye a la hora 
de la inserción del separador. Aunque existen estas di- 
ficultades, una vez que se logran superar quedan bien. 


El diseño, sí o sí, sufrirá cambios traspasado de 
Fireworks a Dreamweaver (Figura 19). No hay alter- 
nativa en este aspecto. El 90% de las posibilidades 
da que, aunque sea algo pequeño, cambiará. Esto se 
debe a que todo debe adaptarse a las tablas. Debemos 
tratar de que los cambios sean los menos posibles 
y que prácticamente no se noten (Figura 20). 


FIGURA 18. 
El separador 





Importante empresa sñoparticta busca Vendedor con experiencia y movilidad propia, 
cón 6 sin carbera de clientes. Deberá contar cn cexpeñendcia de 2 años 


pom ad amén. 
Requisitos que deben cumplir bos postulantes: 


Edad; Hasta 35 años 
l i Senumilana, 


o amia ada RARA 





que se encuentra 
debajo del encabezado 
Búsquedas Laborales 
del sitio Baires Turbo 
está incluido 

como parte de éste. 






HERRAMIENTAS CON OPCIONES MÚLTIPLES 


En Dreamweaver y en Fireworks, la pequeña flecha negra que aparece en el costado inferior 


derecho de una herramienta al ser utilizada significa que, al mantener el botón izquierdo del 


mouse presionado por unos segundos, se desplegará un menú con diferentes opciones. 
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¿Por qué usar Fireworks para diseñar nuestro sitio? 





ia biahe Fameen CAS > [Capa Api: Pipra 1 al 50%] 


FIGURA 19. 
El diseño final 
ATERDE M ci en Fireworks del sitio 


de Quinta Aroma Verde. 


A DE, 


|% Quinta Aroma Verde 2 > z o a Aa Se puede ver la gran 


ide METIO CAN PPP prin, K 4 > j $ l a = diferencia con respecto 


Famien y menmen lala 


` 
F 
À, 
We 
A 
o, 


Tria bea ror ba di li èrra a ip Piri 


a areas | IS a uno estático preliminar. 


Observemos las divisiones 
entre las áreas 








y la ubicación 





de los elementos. 


il Edo rearme CEH - MElar e Doph Daina Aroma orde him] 

ihep dvn Yer imata > Modicar [mio Comunäor So Weréma Apodo 
"BAFE cosa Dana l Parras Dt do | Ea | Pr 
124 (005-4100 -|U FIGURA 20 

Cuerda desea Verda ri l L l - = ~ = 

| Tica a a) Tios Curia Arca arie to cma p rior El diseño aplicado 
w e E mmj aT E] m -eeen : Ta 

Ti Aa 


p en Dreamweaver. 
ak A Prestemos atención 
AA e Eventos mida Enea A Md] al en todos los cambios 


a A a E A A a que se produjeron 


mm ep 7 lll > en la aplicación 
Quienes somos *E de elementos y los 
aroma Ver vs una ca quitia con más e 300 cto, | espacios de contenido. 


bii Arbas al 
Y ATA y ag 


masa e E ta Curt africa a gH Í dy En este caso, 
ión di integra rd humani àli nakpiithi e l ; pa cid las d ife re ncias son 


Huata An Crecer cOn ARS LAHA e H bhian gu 
Agi iplik e, Pri y Srógóndr feed de 


un poco sutiles, 


La propujeria de Arona VE COSA EN CTE MECA DITA 


mancoraa, arta y decis biii, duranda y diripuit i ; pero ig ual existen. 








RESUMEN 


Vimos los pasos para crear un diseño preliminar estático de nuestro sitio web, y así poder 
tener una aproximación más concreta a éste. También analizamos el uso de diferentes tipo- 
grafías, colores y fondos para nuestro proyecto, según el tipo de perfil que deseamos darle. 
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Multiple choice 


p 1 ¿Cuál de los siguientes fondos 
se caracteriza por tener un patrón 
de dibujo repetitivo? 

a- Fondo pleno. 

b- Fondo trabajado. 

c- Fondo de imagen. 

d- Ninguno de los anteriores. 


p 2 ¿Cuál de las siguientes fuentes 
tiene serif? 

a- Arial. 

b- Verdana. 

c- Calibri. 

d- Georgia. 


p 3 ¿Cuál de las siguientes fuentes 
no tiene serif? 

a- Times New Roman. 

b- Georgia. 

c- Verdana. 

d- Courier New. 
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È 4 ¿Cuál herramienta nos permite 
agregar un texto falso en nuestro sitio web? 
a- Lorem lpsum. 

b- Herramienta texto. 

c- Herramienta puntero. 

d- Herramienta muestra. 


p 5 ¿Cuál de las siguientes 
tipografías denota seriedad y se utiliza 
en diseños más clásicos? 

a- Sin serif. 

b- Con serif. 

c- Las dos anteriores. 

d- Ninguna de las anteriores. 


» 6 ¿Cuál de las siguientes tipografías 
denota mayor flexibilidad? 

a- Sin serif. 

b- Con serif. 

c- Las dos anteriores. 

d- Ninguna de las anteriores. 


"2-9 'Q-G 'e-y '2-Ẹ 'p-Z 'q-} :seysandsəy 
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Capítulo 4 


Elementos gráficos 
estáticos 





En este capítulo, crearemos 
los elementos gráficos estáticos 
que conformarán nuestro sitio web. 
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Elementos gráficos 
estáticos 


DISEÑO Y CREACIÓN DE ELEMENTOS 
GRÁFICOS ESTÁTICOS 

La parte visual en un sitio web es muy importante. 
Un buen diseño hace que los usuarios tomen interés 
rápidamente y, aunque sea por unos minutos, lo na- 
veguen para verlo un poco más. Es una pieza clave 
que sea visualmente atractivo. 


Por supuesto que también debemos tener muy en 
cuenta el tipo de contenido y crear un diseño que 
sea funcional. Muchas veces, los usuarios buscan 
solamente información, no obstante, si viene acom- 
pañada de un buen diseño, mejor. Existen dos consi- 
deraciones básicas que conviene tener presentes: el 
formato de imagen por usar y su peso. 


Diferentes formatos 

de imagen por utilizar 

Si bien existen muchos formatos de imagen, nosotros 
trabajaremos sobre todo con dos: GIF y JPG. También 
lo haremos con PNG, que es el original de Fireworks, 
pero no colocaremos ninguna imagen en nuestra 
web con él. Los formatos GIF y JPG se diferencian, 
sobre todo, por la calidad y la composición. 


© 


MEDIDAS DE DATOS 





Los primeros tienen, como máximo, una paleta de 
256 colores: son ideales para imágenes de baja ca- 
lidad o con poca composición de colores. Un ejem- 
plo de esto podrían ser fondos de celdas o tablas 
tipo wallpaper o isotipos y logotipos. También 
podemos usarlos en barras de navegación y archivos 
de imágenes que creemos que no necesitan demasia- 
da definición. Con respecto a los segundos, tienen una 
paleta de millones de colores: son perfectos para imá- 
genes de alta calidad o con una gran composición 
de colores. Ejemplos de esto pueden ser fotografías, 
imágenes con degradado e imágenes creadas por 
nosotros, que necesiten mucha definición. 


Peso de la imagen 
Si bien, hoy en día, la mayoría de los proveedores de 
conexión a Internet ofrece banda ancha y la velocidad 






Para tener una idea de la información que se necesita para llenar diferentes medidas de 


datos: 800 películas de dos horas de duración cada una entran en 1 terabyte, la información 


del buscador Google entra en 2 petabytes, y el contenido de Internet ocupa 300 exabytes. 
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de transmisión de la información crece cada vez 
más, el peso de un sitio web todavía es importante. 
Éste se mide en kilobytes (KB) por página. El ideal 
aproximado es 150 KB, lo que nos asegura que cargue 
rápido y que el usuario no tenga que esperar demasia- 
do a que bajen las imágenes. Para mayor precisión, a 
continuación, podemos observar las diferentes medi- 
das de peso para archivos digitales en una tabla. 

En Dreamweaver, hay una forma muy sencilla de saber 
cuánto pesa una página. La herramienta se llama 
Tamaño de descarga/Tiempo de descarga y se 
encuentra en la parte inferior derecha, justo arriba 
de la barra de Propiedades, sobre una barra gris, 
como podemos observar en la Figura 1. 


W Q [100% *|1019x367* 104 /155 


FIGURA 1. El tiempo de descarga 
se mide con la velocidad máxima 





de una conexión telefónica. 


Diseño png 
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La parte visual 
en un sitio web 
es muy importante 


IDENTIFICACIÓN Y CREACIÓN DE 
ARCHIVOS ORIGINALES DE IMAGEN 
Comenzamos el trabajo de creación de imágenes 
para nuestro sitio. Primero, a modo de repaso, obser- 
varemos nuevamente el diseño estático preliminar 
que hicimos en el capítulo anterior (Figura 2). 
Antes de empezar a trabajar sobre los elementos en 
cuestión, nos conviene decidir el color de fondo que 
tendrá nuestra página. Recordemos que podemos 
optar por uno pleno o por uno trabajado, depende 
de la impronta que deseemos darle. 


Si tenemos presente que se trata de una empresa 
de desarrollo web y hosting, seguramente nos 
conviene algo sobrio, quizás un fondo blanco 
o gris claro pleno, o uno trabajado en tonos pare- 
cidos (Paso a paso 1). 


FIGURA 2. 

En nuestro diseño 
estático preliminar, 
identificaremos las 
diferentes imágenes 
que debemos crear 
en Fireworks para 
insertar en las tablas 
y celdas del HTML. 
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Modificación de fondo trabajado 


Fondo Muestra.png 
€ Original | [52] Vista previa [12 copias EH4 copias | 





En Fireworks, vaya a Archivo/Abrir y abra el archivo original PNG de fondo 
trabajado, que guardó en la carpeta Originales, en el capítulo anterior. 


Cuadricula 1 
Cuadrícula 2 
Cuadricula 3 
Cuadricula 4 
Cuadrícula 5 
Cuadricula 6 
Cuadricula 7 
Fibra 
Gasa 
Hierba 
Humeante 
Lia 
Lines-Disg 1 
Lines-Disg 2 
Linea Hertz 1 
Lines-Horiz 2 
Linea Hon: 3 
Linea Merz 4 
Lines-Vert 1 
Linea-Vert 2 
Lines Vert 3 
Madera 
Mala 
Marea negra 
1 Metal 


Pergarano 





r 
4 Borde: Puntos grandes 


Con la Herramienta Puntero, haga un clic para seleccionar la imagen y, en la barra 
de Propiedades, despliegue el menú de la opción Textura. Seleccione Cruces 1. 
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6 Ml 3/2 1(0 1: 80 [vna | 
Borde: [Suavizado ~ | 0 Borde: | 0 ”| Filtros: +, - 
Textura: | Cruces 1 X 80 j Textura; | ADN - o + 


[7] Transparente Redondez del rectángulo: o [z] | 








En la opción Cantidad de textura, que se encuentra a la derecha de la opción 
Textura, cambie el número a 80, para que se note más. 


ld ¿db Fire 053 > [Fondo.pog : Página al 100% (Rectángulo]"] 
[Archivo | Edición Ver Selecciones Modificar Teto Comandos filtros Vemens Ayuda 
Minera Ct N 
Abrir cig 
ramina Ceri Alte Ô 
Albir recienñe 
Recongibur tabla. 
Explorar 
Cenn Eiri Ww 


Cercar todo 


Grusrdar Cube A 
Guardar comig. rbe Mayi $ 


Descartar cambios 


import. Cif 
Exporta... Cte Minis E 
Presertopón prehiminas de la mager... Eli Mos A 
Crriar al coreo ebectrónico + 
Acbaahtar HTML- 


Información de secos. Ci A+ rie E 


Aesbenbe de exportación 
Procriar por lobri— 


Wista previa en el navegidor 


Cenhgurar pigri- 





Ahora, diríjase a Archivo/Guardar para guardar los cambios que realizamos 
en el original PNG. También puede oprimir CTRL+S. 
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n 





Presentación preliminar de la imagen 








LOpdones | Archivo | Animación | GIF [V] Vista previa | Configuraciones guardadas: 


AA Adaptable 256 colores | [GIF WebSnap 256 y 
Formato: GIF E B 175 bytes 0 seg. a 56kbps = a 
Paleta: |Adaptable WebSnap v 


Pérdida: 0 [y] 








Tramar: [F] | E 


([efjaje ja) (aja 


Mate: a] 





Para reemplazar el exportado anteriormente, vaya a Archivo/Presentación 
preliminar de la imagen. En la ventana, seleccione GIF WebSnap 256 
en Configuraciones guardadas. Luego, haga clic en Aceptar. 


- 0900 
E: Fecha decu Eguen Tamaño Cisificación 
de : 


Sr recirnbr 


londo- murina 


fondo=moaerdira qí ya be, eemi y reemplazar los arch 


É L, emilentes] 


mbm is folg ama achia 


[Fiia dress n aes Sólo página abu 





En esta ventana seleccione la subcarpeta gif dentro de la carpeta img y reemplace 
el archivo con un doble clic sobre el que ya estaba guardado. 
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Ya tenemos nuestro fondo para la página. El primer 
componente que salta a la vista es el encabezado. 
Como ya habíamos mencionado, su medida es de 
900 pixeles de ancho por 70 de alto. En Fireworks, 
iremos a Archivo/Nuevo y escribiremos las medi- 
das correspondientes en el recuadro de opciones. 


Debemos procurar que la opción Resolución esté 
en 72. Como nuestra página tiene un fondo traba- 
jado con sus respectivas tonalidades de gris, nos 
conviene usar algo dentro de éstas para colocar en 
la opción Color de lienzo. Seleccionaremos el 
blanco pleno, 4CCCCCC. 


Con nuestro lienzo listo, comenzaremos a diseñar 
el encabezado donde, por lo general, deben estar 
presentes ciertos elementos informativos, como el 
nombre de la empresa (logotipo), el simbolo gráfico 





que la representa (isotipo), si tiene, algún eslogan 
o frase llamativa y los colores corporativos. 


Para el logotipo (InterWeb) utilizaremos la tipografía 
Microsoft Sans Serif. En caso de no contar con 
ella, cualquier tipografía sin serif puede funcionar 
bien. El isotipo lo dejaremos de lado. Nuestro 
eslogan será “Web 8: Hosting Solutions”. Los 
colores corporativos serán escalas de azules, grises 
y rojos, y también contaremos el blanco como un 
color para fondos y detalles (Paso a paso 2). 


Más tarde volveremos sobre el encabezado para 
agregarle algunos efectos de filtros, pero por aho- 
ra lo dejaremos guardado para concentrarnos en 
el pie de página. El contenido típico de la mayoría 
de los pies de página es: teléfono, e-mail y locación 
geográfica. Este último punto es muy importante por 
la globalidad de Internet. Es conveniente que figuren 
la ciudad, provincia o estado, y país. La dirección física 
no es importante. Para escribir toda esta informa- 
ción, usaremos la misma tipografía del logotipo, 
Microsoft Sans Serif (Paso a paso 3). 


Es conveniente que 
figuren la ciudad, 
provincia o estado, y pais 


( ») DIFERENCIAS Y VARIACIONES EN LA TIPOGRAFÍA 


Es posible que las tipografías usadas en el proyecto difieran de las disponibles en la 


computadora de los lectores. En este caso, las podemos reemplazar perfectamente 


por otras parecidas o podemos buscar en Internet. 
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Diseño del encabezado 


Herremberita [Microsoft Sara Serif =| 18 Mcs Bv [=] (Hermal = 
A Trata an —= - y E A] 


E [|F 100 [elsa +] AE E 


| Ajuste enire caracters o rango de caracteres f 1 
- z [Siswicado tere z 


14] Aute muba, 





Seleccione la Herramienta Texto y, en la barra de Propiedades, elija la tipografía 
Microsoft Sans Serif en la opción Fuente. En la opción Tamaño, seleccione 40. 
El color será negro (4000000), con las opciones de Negrita y Cursiva seleccionadas. 
Coloque el Ajuste entre caracteres en 20 con alineación izquierda. 


LA 


2 Enginal ENúimita preria FO copias Ea papis 


InterWeb 





Con la Herramienta Texto seleccionada. Escriba InterWeb. Una vez hecho esto, 
con la Herramienta Puntero, ajuste la ubicación del texto. 
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InterwWeb 


[Página 1 + 





Herramienta 
Texto 








Ajuste auto. | 














Para el eslogan, vuelva a seleccionar la Herramienta Texto y, en la barra 
de Propiedades, cambie la tipografía a una de tipo script. El tamaño será 24, 
aproximadamente, el color, rojo oscuro (4990000) y la alineación izquierda. 


Capi Figli" 


gf Onginal ESúinta prena M copias Ea papilar 


InterWeb 


Mel E Hosting Soluifiona. 





Con la Herramienta Texto seleccionada, haga clic debajo del logotipo, 
cerca de la mitad. Escriba Web 8: Hosting Solutions. Una vez hecho esto, 
con la Herramienta Puntero, ajuste la ubicación del eslogan. 
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InterWeb. 


Well E Hosting Soludiono 


[Página 1 X 
v Propiedades 
Herramienta È E Sólido e |? [Z] 0 ¡E 100 [z] [Norma | 
O Rectángulo ; s i = 
Borde: Suavizado ~] 0 r Borde: | 0 
mi u | Teraso r] o [e] recon 


Al.: Y: Transparente 





Ahora se agregarán algunos elementos gráficos para resaltar el encabezado. 
Seleccione la Herramienta Rectángulo y dibuje una línea de entre unos 
5 y 10 pixeles de alto por unos 650 de ancho. 


InterwWeb. 


Well E Hosting So lbifions 


[Página] ~ 


¥ Propiedades 


permena [66 sas |2 ZE [o0 [e] (orma 


O Rectángulo 
do  +|0 Borde: | 0 ` 


Borf 20000FF | 


An.: ox: Textura: [ADN ~) 0 [z] Textura; | ADN 


Al.: Y: Transparente 





Seleccione la Herramienta Puntero y haga clic sobre la línea que acaba de dibujar. 
En la barra de Propiedades, cámbiele el color a azul pleno (+0000FF). 
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Interweb 


v Prajem 





Con la línea seleccionada, vaya a Edición/Copiar y luego a Edición/Pegar 
para duplicarla. Utilice la Herramienta Puntero para moverla un poco hacia 
abajo y hacia la izquierda. 


InterWeb = 


Hol E Hosting Solsona 


AS 





Con la línea seleccionada, vaya a la barra de Propiedades y cambie el color a un azul 
claro (#0099FF). Vuelva a efectuar la primera parte del Paso 7. Luego, mueva la línea 
un poco hacia arriba y hacia la derecha. Para ésta use un color azul oscuro (#000099). 
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@ Herramienta Elipse (U) 
ES Herramienta Polígono (U) 





©) Donut 


G) Espirales 

s Estrella 

c> Flecha 

[P Forma de L 

“L Línea de conexión 

© Poligono inteligente 

£ Rectángulo biselado 

E] Rectángulo con chaflán 
C) Rectángulo redondeado 
(M Sección 


Textura: [ADN y]0 [y] Textura: | ADN 


Seleccione la Herramienta Rectángulo y mantenga el botón izquierdo del mouse 
pulsado hasta que se despliegue el submenú. Allí, elija la Herramienta Elipse. 








lPágina1 - M b M I lb | 913x107 |100% ~ 


Dibuje un círculo cerca del extremo derecho del lienzo, de manera tal que la mitad 
inferior de la circunferencia quede fuera del área de éste. 
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[Página 1 ~ 


o imena |G 7] [war e) [719 [eliana 


ipse - 
Borde:|Suavizado ~ || 0 r (EFFFFFF Borde:| + 0 [z] 


Transparente 





Seleccione el círculo con la Herramienta Puntero y, en la barra de Propiedades, 
quítele el relleno y cambie el color de borde a blanco pleno (#FFFFFF). 
Colóquele un ancho de borde de 4. 


[Página 1 - Moi= Pl L | 916x117 | 100% x 


Igual que en el Paso 7, duplique el círculo y mueva la copia hacia la izquierda y hacia 





abajo del existente. La parte visible debe quedar más pequeña que la del anterior. 
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| 9271119 | 100% * 


Repita el Paso 12, pero con el círculo duplicado. 
Arrástrelo, con la Herramienta Puntero, más hacia la izquierda y hacia abajo. 


- O 2cm 


Nombre Fecha dec... Utiquetas Tamaño Claséración 


| Encabezado | fondo Muestra 











Para finalizar el proceso, debe guardar el archivo como original PNG en la carpeta 
Originales, con el nombre Encabezado. 
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Diseño del pie de página 


Cipi Pg" 


# Digna E vina pirvia Mi copian ES copin 





Cree un nuevo archivo (Archivo / Nuevo) que tenga 880 pixeles de ancho por 40 
de alto. El color de fondo del lienzo será el mismo que el usado para el encabezado. 


[Página 1 ~ 


em 7 N C S [B so Elena 
anos dyos  [»] 3 100 [mis +) a z 
=> E 


[Y] Ajuste auto. 








Con la Herramienta Texto y en la barra de Propiedades, elija la tipografía 
Microsoft Sans Serif. En la opción Tamaño, seleccione 16. 

El color será rojo oscuro (4990000), con la opción Negrita seleccionada. 
Coloque el Ajuste entre caracteres en 5, con alineación derecha. 
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Teléfono +54 11 4552 6587 | Infogbinterweb.com.ar | Buenos Alres, Argentina 


A Hamami Marasi Sara Senf | lr MO cs le loma 
Festa S E = : 
woo HI w ka = EsHinz 
Ey JEg |z po z 


Es mu [+] E 6 ml $ dede mute, 





Seleccione la Herramienta Texto y haga clic cerca del margen derecho del lienzo 
para poder comenzar a escribir. Escriba el teléfono, el e-mail y la locación geográfica. 
Los datos son ficticios. Con la Herramienta Puntero, ajuste la ubicación del texto. 


Teléfono +54 11 4552 6587 | infoOinterweb.co 


[Página 1 


¥ Propiedades 


remera [6 Llao) 7 2 
O Rectángulo E $ 
0] aaa laredo 


Al.: Y: 





Se agregarán algunos elementos gráficos para resaltar el encabezado. 
Elija la Herramienta Rectángulo y dibuje una línea que cruce el lienzo 
en su parte izquierda, de forma diagonal. Será de color blanco pleno (#FFFFFF). 
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Teléfono +54 11 4552 6587 | info@interweb.cq 


[Página 1 
Y Propiedades 


serena — [6 fas r) ZO Tano) [8 10 e ea 


Rectángulo 


Borde: |Suavizado v~|0 |~ Borde: | [e E 


so w | toton ao [| E 


eS Transparente 





Seleccione la línea, vaya a Edición/Copiar y, después, a Edición/Pegar 
para duplicarla. Con la Herramienta Puntero, muévala un poco hacia la derecha. 
Luego repita el procedimiento. 


- 0315 


Nombre Fecha de €... ltquetas Tamaño Clasfrceción 


Encabezado Fondo Muestra Pie de pigna 
lipo: Imagen PNG 
Dimensiones: 830 x 90 
Tamaño 100 KB 


Fe de pégra 





Powerade PNG € oral 





Gaedar como copia 





Para finalizar el procedimiento, debe guardar el archivo como original PNG, 
en la carpeta Originales, con el nombre Pie de página. 
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Al igual que con el encabezado, más tarde volvere- 
mos sobre el pie de página para agregarle algunos 
efectos de filtros. Ahora pasaremos a las líneas 
divisorias (Paso a paso 4). 


El espacio para los banners, junto con éstos, los deja- 
remos para más adelante. Agregaremos algunos ele- 
mentos gráficos más para las partes de texto del sitio. 
Por ahora, tenemos tres componentes fundamentales 
para todas las páginas de nuestro sitio, pero todavía 
nos faltan más retoques. 


APLICACIÓN DE FILTROS 
Y MASCARAS PARA LA WEB 


Si bien ya tenemos diseñado nuestro encabezado y 
pie de página, en esta sección les agregaremos al- 
gunos efectos para que destaquen más y muestren 
un diseño trabajado. Podremos observar que cuando 
hagamos esto, el atractivo de nuestros gráficos 
mejorará notablemente, y ganarán impacto. 





PRESENTACIÓN PRELIMINAR DE LA IMAGEN 


Comenzaremos con el encabezado. Desde Fireworks 
iremos a Archivo/Abrir y, en la carpeta Origina- 
les, buscaremos el archivo correspondiente. Los 
efectos que aplicaremos sobre nuestro archivo serán 
sombras e iluminados, que aparecen en la ventana 
de Filtros de la barra de Propiedades cuando 
tenemos un objeto seleccionado (Paso a paso 5). 
Seguiremos con el pie de página (Paso a paso 6). 
Los efectos que aplicaremos sobre este elemento 
serán sombras y máscaras, estas últimas las colo- 
caremos sobre otros elementos gráficos que inser- 
taremos en nuestro archivo. 


Aunque ya exportamos nuestro pie de página, aún 
no hemos terminado con él porque nos falta agre- 
garle un componente gráfico más con máscara. 
Para esto, necesitaremos crear otro archivo nuevo de 
Fireworks, importar algunas imágenes y realizar 
un par de operaciones más, para luego insertarlo en 
el pie de página (Paso a paso 7). 


El atractivo de nuestros 
gráficos mejorará 
notablemente, 

y ganarán impacto 





En la ventana Presentación preliminar de la imagen, al lado de la lengueta Optimizar, está 


Archivo. Desde ese lugar, podemos controlar la escala de exportación del elemento gráfico. 


Esto sirve para cambiar el tamaño, en el momento en que exportamos una imagen. 
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Diseño de las líneas divisorias 


Nuevo documento 


Tamaño del lienzo: 20, 7K 


CN 


Resolución: 72 Pixeles ¡pulgada T 


Color del lienzo 
Ej Blanco 
(O Transparente 


@) Personalizado: 


E 





Cree un nuevo archivo (Archivo /Nuevo) que tenga 10 pixeles de ancho por 530 
de alto. El color de fondo del lienzo será el mismo que el usado para el pie de página. 


[Página 1 y $ 
v Propiedades 


teen |6 Me 1720 EJ fiom 

| Borde:[Suavizado ~] 0 jv Borde: m 0 |>| |Filtros: + - 

Ani 14 X: -3 | Textura: (aonar) o [| Textura: [aon -|fo 
Al 


532 Y 2 Transparente 





. 
. 
.. 





Redondez del rectángulo: o 1 | 


Seleccione la Herramienta Rectángulo y dibuje un rectángulo que cubra 
todo el lienzo. Cambie su color de relleno a azul oscuro (#000099). 
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JPEG [Documento] [Página 1 AS, 


¥ Propiedades 


E EA 


Borde: [Suavizado — y] 0 y Borde: 0 [y Filtros: + - 
-3 | Textura: |Cuadricula 3 v| 70 [z] Textura: | ADN 0 i 
j | Transparente Redondez del rectángulo: 0 [z] 


En la barra de Propiedades, despliegue el menú de la opción Textura. Seleccione 

















Cuadrícula 3. En la opción Cantidad de textura cambie el número a 70. 


- 097911 


Fecha dec... Enquetes Tamaño Clapfración 
Sitios recientes 


E Encabezado Fondo Muestra 


Escritorio 








Guarde el archivo como original PNG, en la carpeta Originales, con el nombre Líneas. 
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Feta previa Configuaragors prerdades: 


25 cds Webánac ==] 
|si nga mmia TA A — 


a (ie o 


alla cr 


| Eire colores ño izado 





Este archivo no tendrá más cambios, por lo tanto, se exportará. Vaya a 
Archivo/Presentación preliminar de la imagen. En la ventana, elija GIF 
WebSnap 256, en Configuraciones guardadas. Luego, haga clic en Exportar. 


= B F m= 


Fechodez.-  Pliquetal Tarmiño Ciiticación 


Terdo-misscra knast 





En la siguiente ventana seleccione la subcarpeta gi, dentro de la carpeta img, 
y guárdelo con el nombre lineas. 
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Aplicación de filtros al encabezado 


InterWeb 


Web E Hosting Soltions 


A 


Tento [Perene ars arit 


intrvarh dy 2 |=| F 200 |= [3 =| 


[| 414) [iadan z| 
| E jente sarta. | 


hs 25 E 


2 Eso [eo 
Poo Ma o o 


O ERE 
E ma: 4 


Mingurs 
Üpoana 
Eguilai ¿úler 
Brpel y Heliore 
Diesentocar 
Otro 

Pertikai 

Hurda 


Sombora € lummar 


lechos abonos de Photoihop 





Con la Herramienta Puntero, seleccione InterWeb. En la barra de Propiedades, 


vaya a la ventana Filtros, en la parte inferior derecha, y haga clic en el símbolo +. 








Ninguno 
Opciones 


Ajustar color 


Bisel y Relieve 


Desenfocar 
Otro 
Perfilar 
Ruido 


Sombrear e iluminar 





Y, 63 Siempre 


EA Lela ALCES 


A ES 


E 100 [r]lnomal 009] 





JN 
ia 
la | 


70 [100% - Ma | 
| 


Iluminado 


Iluminado interior 


Efectos automáticos de Photoshop 


Sombra 
Sombra interior 


Sombra sólida... 





Y [5 Capa de Web H 
@ | v Capai o 


== Trazado 

== Trazado 

== Trazado 

== Rectángulo 

=== Rectángulo 

== Rectángulo 

— Rectángulo 

== Web 8 Hosting Soluti 
= InterWeb 





265585 f 


A continuación, en el menú desplegable, debe seleccionar Sombrear e Iluminar 


y, dentro del nuevo menú, la opción Sombra. 
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Pagina 1 


+ Propiedades 





En la nueva ventana que aparece, verá varias opciones. Coloque 8 en Distancia. 
Seleccione blanco pleno (4FFFFFF) en la casilla de color, en Opacidad, 75 y, en 
Suavidad, 2. Luego, haga clic con el botón izquierdo en el área de trabajo. 


Interweb 


Wal E Hosting Sobifions 


- E Nés g x 
> 
a Pannz ma 


Het mtrs or de Pr 





Repita el Paso 1 con el eslogan y, en Sombrear e Iluminar, seleccione Iluminado. 
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Páginal + 
Y Propiedades 





Dra a Texto | [Rage Italic 


y] 24 
| | + 
Web &Hosti | ay o [y] 


1o (a 
E] 217) [Suaizadoteme r) [v 
zl 


; | - Desplazamiento: 0 
Ajuste auto. | 


[el 


4 


An: 225 X: 94 [= 0 [y] 


Al: 28 Yi 42 |Æ 100% [y] 


oj o 

















En la ventana del efecto, verá opciones parecidas a las del Paso 3. La primera es Anchura, 
donde colocará 3. Seleccione blanco pleno (#FFFFFF) en la casilla de color, 


en Opacidad, 70 y, en Suavidad, 5. Haga clic con el botón izquierdo en el área de trabajo. 





Página I EA 


| s00x70 |100% ~ 
Repita el Paso 1 con los círculos. Para seleccionarlos en conjunto, mantenga la tecla SHIFT 
presionada mientras hace un clic con el botón izquierdo del mouse sobre cada uno. 
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[Páginal ~ | 900x70 [100% ~ 


7119 Eire) Bey Be y 

Borde: Po 0 [y] Fii ® [z] 

”|| Textura: | ADN x| 0 [x > A 315 [x] 
| | Sólo sombra 


En la ventana Filtros, seleccione Sombrear e Iluminar y Sombra. Coloque 7 
en Distancia. Elija rojo oscuro (#990000) en la casilla de color, en Opacidad, 65 y, 
en Suavidad, 4. Luego, haga clic con el botón izquierdo en el área de trabajo. 

















[Página1 ~ | 900x70 [100% ~ 








Repita el Paso 1 con la línea del medio. Vaya a Filtros/Sombrear 

e Iluminar/Iluminado. En Distancia coloque 7. Seleccione un celeste 
(#00FFFF) en la casilla de color, en Opacidad, 65 y, en Suavidad, 12. 
Luego, haga clic con el botón izquierdo en el área de trabajo. 
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- 0) 500- 


Fechadec Etiquetes Tamaño Clafi ación 


encabezado londs-miuétira hnáss 





Guarde los cambios en el original, en Archivo /Guardar. Luego, vaya a 
Archivo/Presentación preliminar de la imagen, seleccione GIF WebSnap 
256 en Configuraciones guardadas y exporte el archivo en la subcarpeta gif, 
dentro de la carpeta img, con el nombre encabezado. 


Los efectos que 
aplicamos sobre 

el pie de página fueron 
sombras y máscaras 









EDITAR Y BORRAR EFECTOS 


Una vez que colocamos los efectos desde la ventana Filtros, éstos pueden ser modi- 
ficados a través de ella. Lo único que debemos hacer para editarlos es doble clic con 


el botón izquierdo del mouse sobre él. 
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Aplicación de filtros al pie de página 


«Teléfono +54 11 4552 8587 | infogBinterweb.com.ar | Buenos Alres, Argentina 


Braut 
Apoonei 


Ajustar color | 
Enel y Relieve Bisel exterior 
Denie Bise riemer 
Üre Relieve elevado 
Pertiar Relieve hundido 
Ruido : 

= =y Somibscar e iluminar 

-< E Mcs o |N 

5 EXMEzZ am: + 

F| bna | 
+ | Ajuste aude. 


Efectos automáticos de Photoshop 


Con la Herramienta Puntero, seleccione el texto. En Filtros, 
seleccione Bisel y Relieve/Bisel interior. 


o +54 11 4552 6587 | intoQinterweb.com.ar | Buenos Aires, Argentina: 





IPáginal + l4 | 880x40 |100% ~ 


Filtros: + 


y | | y 0 Bisel interior 
Daposteauto | | 


No efectúe ningún cambio en las opciones de Bisel interior. 
Haga un clic con el botón izquierdo en el área de trabajo. 
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F Pologuana 


La A 


«Teléfono +54 11 4552 6587 | infofbinterweb.com.ar | Buenos Alres, Argentina 


Hingare 
Opciones 


juciar color 
Beal y: Helen 
Dieserdocar 
Ciro 
Perfidi Despertlas mábesra... 
Rudo Perfilar 
— a a E Cambrea è ihora Ferlilar mis 
T - 
= f 10 (=| z e 
H E ges awmi 
= EHE z rra: 


[Bamana teru 0] | irene 


AA | 


Eectos autersáticos de Photochop 





Mantenga el texto seleccionado, vaya nuevamente a Filtros y elija Perfilar / 
Perfilar. Luego, vuelva a hacer clic con el botón izquierdo en el área de trabajo. 





o +54 11 4552 6587 | info(Dinterweb.com.ar | Buenos Aires, Argentina: 


Páginal + M | 830x40 [100% ~ 








Sólo sombra 











Todavía con el texto seleccionado, en Filtros, elija Sombrear e Iluminar y Sombra. 
En Distancia, coloque 3. Seleccione blanco pleno (#FFFFFF) en la casilla de color, en 
Opacidad, 75 y, en Suavidad, 2. Haga clic con el botón izquierdo en el área de trabajo. 
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- 02500 


Fecha dec... Etiquetas Tamaño Clasticación 


encabezado tondo-muestra ines; 





Guarde los cambios en el original, en Archivo /Guardar. Luego, vaya 
aArchivo/Presentación preliminar de la imagen, seleccione GIF 
WebSnap 256 en Configuraciones guardadas y exporte el archivo 

en la subcarpeta gif, dentro de la carpeta img, con el nombre piepagina. 


Ya tenemos nuestra imagen con máscara. Ahora, desarrollaremos más adelante. Cabe recordar que la 
debemos insertarla en el pie de página, para así con- gran mayoría de las páginas internas de nuestro sitio 
cluir con su diseño (Paso a paso 8). De esta forma, tendrán la misma estructura básica de diseño, con lo 
empezamos a tener elementos gráficos diseñados que los componentes que trabajamos en esta sección 
para InterWeb. Todavía faltan muchos otros, pero los se usarán, seguramente, en todos los archivos HTML. 





VOLVER PARA ATRÁS 


A diferencia de la mayoría de los efectos de Fireworks, las opciones relacionadas con la opti- 
mización no pueden borrarse o desactivarse. Es importante su previsualización antes de apli- 
carlas. Como siempre, contamos con CTRL+Z o Edición Deshacer para volver para atrás. 
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"i 





3 http://www.pennrealtor.com/solutions/art/internet/internet.jpg - Windows Internet Explorer 
Ou + | ES http://www.pennrealtor.com/solutions/art/internet/internet.jpg 


Archivo Edición Ver Favoritos Herramientas Ayuda 





w k LES http://www.pennrealtor.com/solutions/art/inter... | | 








Abrir vínculo 

Abrir vínculo en una nueva pestaña 
Abrir vínculo en una nueva ventana 
Guardar destino como... 


Imprimir destino 


Mostrar imagen 
Guardar imagen como... 


Enviar imagen por correo electrónico... 





Imprimir imagen... 


En Internet, elija tres imágenes relacionadas con la Web (computadoras o símbolos), que no estén 
protegidas por copyright. Guárdelas en la carpeta Originales, con el nombre que desee. 
Haga clic con el botón derecho del mouse sobre cada una y seleccione Guardar imagen como. 


Sin tiludo-5. png" 
J Onga E vita peevia [I] copias ERJA copias 





Cree un archivo nuevo en Fireworks, que tenga el mismo color de fondo 
que el pie de página, 150 pixeles de ancho y 40 de alto. 
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Habas preg” 
a Digna 6 ita piia [I tepat Ea coplas 





Vaya a Archivo/Importar y seleccione una de las imágenes que guardó. 
Cuando vea que el cursor se transforma en un marco superior izquierdo, posiciónese 
sobre el área de trabajo y arrástrelo; asegúrese de que quede un poco de margen 
superior e inferior y luego suelte el mouse. 


Fates.png* 
¿Original | Bvists previa [LZ copias Ea opis 





Repita el Paso 7 con las otras dos imágenes, siempre procure dejar un margen 
adecuado, para que no estén pegadas a los bordes del lienzo ni entre ellas mismas. 
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- 050 


Fecha de captura Enquetes Tamaño Clesfrcación 








Guarde la imagen como archivo original en la carpeta Originales, con el nombre Fotos. 
Desde Archivo/Presentación preliminar de la imagen, expórtelo con formato JPEG- 
Calidadvsuperior a la subcarpeta jpg, dentro de la carpeta img, con el nombre fotos. 


h PO sE 


Nombre Fecha dec... Etiquetas Ciasticación 








Vaya a Archivo/Abrir y abra fotos. jpg desde la subcarpeta jpg, dentro de img. 
Cierre fotos. jpg, ya que no se usará. 
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Cap5_Fig59* 
£4 Original | [322] Vista previa []]2 copias [34 copias | 





[Página 1 , 


Con la Herramienta Rectángulo, dibuje un rectángulo que cubra todas 
las imágenes casi en su totalidad. No importa el color de relleno de la figura. 


[Página I ES 


Herramienta È E J Sólido v 


O Rectángulo 


eode amao z) 1 T 
tenran e E 


Transparente 





Seleccione la figura recién dibujada con la Herramienta Puntero y, en la barra 
de Propiedades, cambie el Borde de rellenos de Suavizado a Fundido. 
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dal Adobe Arewerle 253 > Fotos: Página 1 00 100% (Mapa de Em] 
Auch [Edición] Wer Seleccionar  Medihicar Tete Comando Fibtros Tomana 
Deshacer Corbas 


Riggi Corlia 


Insertar 
Buscás y reemplazar... Ci F 


coria Ci A 
Copos Cirkt 
Dipi corno eclores 

Copie código HTML... Cole le 
Pigi Cai 
Borar RITAGOTSO 


Pegal como máscera Cobre 
Picar dirtro Ctrl+ lps + Y 
Pegar ainbutos Ei + 
Duplicar Cti. Ahe O 
Clenás Cod klanit 
Resbile mapa de bis seleccionado 


Taon 
F A Roots el documento 


 Sánibuños de escala 
Prolerentis 


Modo. sEnerados de teclado... 





Seleccione Herramienta Puntero, haga un clic sobre el rectángulo y córtelo 
(CTRL+X). Nuevamente, con la Herramienta Puntero, seleccione la imagen y, 
en el menú Edición, elija Pegar como máscara. 


Página 1 


JPEG [Documento] 


Y Propiedades 


ES 


`: F N 
Documento Lienzo: FA (] Haga clic para establecer el color Pimagen... ) Ajustar lienzo 
£ 
He y 


Cambie el color de fondo del lienzo al mismo color de fondo del pie de página. 





De esta manera, la imagen quedará perfectamente fusionada con este último archivo. 
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L p9 z O ? y Er 
R- Nombre Fecha de €... Etiquetas Tamaño Clasificación 
y 


Shbos recrentes 


Esceñono 


i h fotos jpg ya eoste. [Cominuar y reemplazar los archivos exstentes? 


Aceptar 








4 Indur dress sn dvisones J Sólo página actual 





Exporte nuevamente el archivo desde Archivo/Presentación preliminar 
de la imagen, verifique que esté en formato JPEG - Calidadvsuperior. 
Reemplace fotos. jpg en la carpeta correspondiente. 


Adobe Fireworks 


Páginal + !' bi di 1) | 150x40 [100% + 


Cierre el archivo. Cuando Fireworks le pregunte si desea guardar los cambios, elija No. 
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Finalización del pie de página 


-~ 02 >m- 


fecha dec.. Etiquetas Tamaño Clavóicación 


Sitios recientes 


Escrtono 


r- 


In 
elsa 








Vaya a Archivo/Abrir y abra el original Pie de página. Diríjase a 
Archivo/Importar y en la subcarpeta jpg, dentro de img, seleccione fotos. jpg. 


CO - Pie de página prog : Página 1 al 100% Mapa de bed] 
bn Ver Sedeccone Modic Tato Comando Filtros Ventara Ayude 


e K Talófono +54 11 4552 6587 | into@intorwob.com.ar | Buanos Airos, Argantina 





El cursor se transformará en un marco superior izquierdo. Posiciónese sobre el área 

de trabajo y, en vez de arrastrarlo, haga un clic con el botón izquierdo del mouse sobre 

el lienzo. De esta manera, la imagen se insertará con su tamaño original. Mueva el archivo 
gráfico importado para que quede en medio de las líneas diagonales y del texto. 
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- 000 o- 


Fecha dec... Digart Tamaño Clasificación 


encabezado fondo- muntra lineas 


inch dera mn dee, T Gil pigra situa 





Vaya a Archivo/Guardar o CTRL+S para guardar el original. Diríijase a Archivo / 
Presentación preliminar de la imagen, seleccione GIF WebSnap 256 en 
Configuraciones guardadas y reemplace el archivo piepagina. jpg. 


La gran mayoria de 

las páginas internas 

de nuestro sitio tendrán 
la misma estructura 
básica de diseño 


») RESUMEN 


En este capítulo, creamos los elementos gráficos estáticos que conformarán nuestro sitio 





web. Aprendimos sobre optimización, equilibrio y composición de imagen, para que nuestros 
archivos gráficos tengan mayor calidad y atractivo, y repasamos los tipos de exportación. 
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Multiple choice 


D 1 ¿Cuál de los siguientes formatos 
es el original de Fireworks? 

a- GIF 

b- JPG 

c- PNG 

d- TIF 


D 2 ¿Cuál de los siguientes formatos tiene 
como máximo una paleta de 256 colores? 

a- GIF 

b- JPG 

c- PNG 

d- TIF 


D 3 ¿Por lo general, en qué parte de la página 
se coloca la dirección física, teléfono y e-mail? 
a- Encabezado. 

b- Pie de página. 

c- Menú. 

d- Banner. 


> 4 ¿Cuánto ocupa la información 
del buscador de Google? 

a- 2 megabytes. 

b- 2 gigabytes. 

c- 2 petabytes. 

d- 2 exabytes. 


p 5 ¿Cuánto ocupa el contenido 
de todo Internet? 

a- 300 megabytes. 

b- 300 gigabytes. 

c- 300 petabytes. 

d- 300 exabytes. 


D 6 ¿En cuál barra se encuentra 
el menú textura? 

a- Propiedades. 

b- Resolución. 

c- Rectángulo. 

d- Texto. 


'e-9 'p-G '2-y q-€ 'B-Z 9-| :se3sendsay 
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En este capítulo, crearemos 
la estructura de tablas para contener 
nuestro diseño en Dreamweaver. 


TOTS 


D 5 Diseño en HTML 








Diseño en HTML 


En los tres capítulos anteriores, trabajamos sobre el 
diseño y la estructura de nuestro sitio en Fireworks. 
Ahora, es tiempo de construir las páginas en 
Dreamweaver. Utilizaremos todo lo visto previamente 
para comenzar a armar el esqueleto de InterWeb 
y, luego, rellenarlo con los archivos gráficos que 
hemos trabajado y que trabajaremos en capítulos 
siguientes. Veremos cómo todo toma forma y el 
sitio comienza a aparecer. 


ADAPTACIÓN DEL DISEÑO 

EN DREAMWEAVER 

Los elementos gráficos e imágenes, junto con el dise- 
ño estático preliminar de nuestro sitio, sufrirán algunas 
modificaciones cuando los adaptemos en HTML. 
Es perfectamente normal, ya que todo el trabajo que 
realicemos en Dreamweaver estará basado en tablas. 
Esto significa que perderemos un poco de libertad con 
respecto al diseño. Todos los archivos gráficos que 
sean curvos o circulares deberán ser adaptados para la 
estructura modular propia del HTML. ¿Por esta 
pérdida de libertad en el diseño nos tendremos 
que conformar con que el sitio de InterWeb tenga 
un menor atractivo visual? No, simplemente, 
modificaremos ciertas cosas para que no pierdan 
su estilo en las tablas de Dreamweaver. 


© 


VALORES DE BORDES 





Hay algunas consideraciones importantes que 
conviene tener en cuenta a la hora de comenzar a 
adaptar nuestro diseño a la estructura modular: 
la fusión, los espacios y los bordes. 


Fusión 

La fusión tiene que ver con la integración de los di- 
ferentes elementos del sitio. Mientras más fusionados 
estén, nuestro diseño será más atractivo y dinámico, 
sin mencionar que se verá más profesional. 


Donde se suele aplicar la fusión con mucha frecuen- 
cia es en los archivos gráficos y las celdas. En este 
sentido, es muy importante que el color de fondo del 
lienzo de la imagen sea igual al color de fondo de la 
celda. Si, por ejemplo, el elemento en cuestión tiene 
una máscara circular, el criterio del color debe ser 
aún más respetado (Figura 1). 






En el caso que no deseemos que una tabla con sus respectivas celdas tenga borde, es muy 
importante que coloquemos el valor 0 en la opción Borde, de la barra de Propiedades. 


De lo contrario, la tabla lo tendrá, ya que el predeterminado de Dreamweaver es 2. 
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Si no respetamos la igualdad de colores, se verán los 
bordes cuadrados de la imagen y el sitio perderá ca- 
lidad. Además, es algo muy sencillo de lograr, con lo 
que este detalle nunca debe estar ausente. 


Espacios 

Los espacios son sumamente importantes en todo 
diseño: aportan aire, permiten descansar la vista y, 
si están bien usados, facilitan la atención en aque- 
llas cosas que deseamos resaltar. En Dreamweaver 
existen, fundamentalmente, cuatro maneras para 
manejar los espacios. 


e Espacio entre celdas. Es la distancia medida en 
pixeles, que se puede colocar entre las diferentes 
celdas dentro de una misma tabla y hace que 
éstas se separen más o menos entre sí. Se maneja 
desde la barra de Propiedades. 

e Relleno de celdas. Es el espacio medido en pixe- 
les, que se puede colocar entre el borde de una 
celda y su contenido, es decir, la sangría. Ésta es 
superior, inferior, derecha e izquierda. Se maneja 
desde la barra de Propiedades. 


Los elementos gráficos 
e imágenes, junto con 
el diseño estático 
preliminar de nuestro 
sitio, sufrirán algunas 
modificaciones cuando 
los adaptemos en HTML 


e Espacio entero. Es la separación entre párrafos. 
Hay que dejar un espacio entre uno y otro, igual al 
tamaño de la tipografía con la que se escribe. 
Se activa con ENTER. 

e Medio espacio. Hace que el cursor salte a la 
línea de abajo, sin dejar espacio entre párrafos. 
Se activa con SHIFT+ENTER. 


Con respecto al espacio entero y al medio espa- 
cio, sirven tanto para texto como para imágenes, O 
para cualquier otro elemento. Son la manera más 





CATALINAS 


E] 


A 
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FIGURA 1. 

Las fotos de la página 
Inicial del sitio 

de Catalinas Eventos 
tienen una máscara 
para que sus bordes 
aparezcan redondeados. 
Como el color de fondo 
del lienzo y el de la celda 
son iguales, hay una 
fusión prolija 

de los elementos. 
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sencilla de separar un título del escrito que lo 
sigue, y de colocar una imagen debajo de otra. 
Si manejamos el uso de espacios en forma correc- 
ta, tenemos una gran ventaja, ya que de ese 
modo podemos realizar los ajustes necesarios 
para que el contenido de un sitio no quede amon- 
tonado y su legibilidad no se dificulte. 


Bordes 

Existen, básicamente, dos elementos que pueden 
llevar borde: las tablas y las imágenes. Con respec- 
to a las primeras, una vez que lo definimos en la 
barra de Propiedades, tanto la tabla como sus 
celdas pasan a tenerlo. 


El de las celdas siempre es de un pixel de ancho, 
mientras que el de la tabla puede variar según lo 
deseemos. En cuanto a las segundas, también se de- 
fine desde la barra de Propiedades y, excepto que 
usemos un archivo CSS de hojas de estilo, siempre 
será de color negro. 


Los bordes de las tablas y de las celdas suman al 
diseño y al uso de espacios. Si se los usa adecuada- 
mente, se transforman en un gran complemento 
para una galería de imágenes o una tabla de datos. 
A lo largo del capítulo, volveremos con ejemplos 
específicos sobre todo lo planteado en esta sección. 


SITIO EN FLASH 


Existen, básicamente, 
dos elementos que 
pueden llevar borde: 

las tablas y las imagenes 


PAUTAS DE DISEÑO 

BÁSICAS PARA LA WEB 

Muchas veces, el trabajo de un diseñador web se ve 
menospreciado debido a varias razones, y la mayo- 
ría de ellas están equivocadas. Lo cierto es que hay 
personas que no valoran el tiempo y el esfuerzo que 
lleva diseñar un sitio, para que todos sus elementos 
guarden un buen equilibrio y atractivo. 


Al navegar por Internet, nos daremos cuenta de que 
hay cientos de miles de sitios diseñados de infinitas 
maneras, lo que no significa que sean buenos dise- 
ños solo porque parecen o porque, según su autor, 
son creativos y originales (Figura 2). 


Algo importante que conviene aclarar es que el con- 
tenido no es excusa para justificar un mal diseño. 
Muchos piensan que, si la información de un sitio no 
es relevante, entonces podemos hacer lo que desee- 
mos con el diseño. No, no tiene nada que ver. 






Si alguna vez diseñamos un sitio en Flash, para funcionar debe, sí o sí, ser insertado en 


un archivo HTML, ya que de lo contrario no puede ser visto por un navegador. Al colocar- 


lo en Dreamweaver, no es necesario que vaya dentro de una tabla. 
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No tenemos por qué realizar un trabajo creativo cuyo 
resultado denote poco esfuerzo. Nuestro diseño debe 
ser tan bueno que invite al usuario a visitar la página 
a pesar de que el contenido no sea atractivo. 


Muchas veces, también se confunde buen diseño 
con diseño complejo. Podemos lograr algo muy 
bueno y, sin embargo, mantenerlo sencillo, austero 
y atractivo. Seguramente, los usuarios nos lo agrade- 
cerán porque les facilitará la lectura (Figura 3). 


ET 
Safari 


Hacer un buen sitio web no es una tarea sencilla. 
Como ya hemos visto en los capítulos anteriores, hay 
muchas cosas que se deben tener en cuenta para 
lograr un óptimo resultado final. Hemos mencionado 
en capítulos anteriores, varios puntos importantes que 
influyen en el diseño. También en la sección anterior 
hemos hablado de la fusión, los espacios y los bordes. 
No obstante, hay otras consideraciones relevantes por 
tener en cuenta dentro de Dreamweaver, que se rela- 
cionan con elementos propios del programa: 


Da en 
el blanco 
E 


tu habilidad 


Take a dinosaur safari through 


ud 
UFO My ET 


AI AE 
MATE 


I taking 


Goi Ean ae) 


A e a a n a S 
Áit | 
* make sure you tuck your red 


be plenty of 3D pictures along the way 


AN NE ETE SA 
O E stop to TEO E 


a SE E 


T " 
IA E 


A A A | never henr anything about bamn 


now? Whatever happened to the ASE 


So dinosaurs are reptiles, but they're also cdiosety related to birds. Were they cold 
blooded like reptiles or warm-blooded ike bëds? Or do scientists even know for sure 


Answers. 
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Philosophy of education on mj Y 


Britannica Concise Encydopedia: phdosophy of education 


Bementary Engbsh/Sparsh soence edecation for schools 


Philosophy 
10.000 productos de las marcas Ahorre un 50% en especiales ti 


O RPGs arnee 
nisscohy of Lite and 
aa f adocit? 


Appibcabon of phiosophical methods to the theory and practice of cducator 
the pħhdosophy of educadon are the nature of leaming, espeaaly m dhiidren; the 
catión, particularly the questón el whether the duel goal of educators shouid bè 





FIGURA 2. 

En el sitio del Museo de 
Misterios No Naturales, 
encontramos banners 
publicitarios en varios 
lugares: fondo negro con 
tipografía amarillo claro, 
diseño sobrecargado 

de imágenes e iconos, 
en definitiva, se dificulta 
su legibilidad. 


FIGURA 3. 

En el sitio Answers.com 
podemos observar 

un diseño muy sobrio 

con pocas imágenes 

y elementos gráficos, 
dominado por el buen uso 
de espacios y la clara 
definición de elementos. 
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e Propiedades de página. Es muy importante con- 
figurarlas correctamente porque ayudan mucho 
en el diseño, sobre todo con los márgenes, los 
colores de vínculos, los fondos y las tipografías. 

e Tabla principal. Es la primera que insertamos en 
una página web. Sus propiedades suelen diferir 
con respecto al resto de las tablas que irán dentro 
de ella. Su función es actuar como un marco con- 
tenedor de toda la información (texto, imágenes, 
etcétera) del documento. Nada va fuera de ella. 

e Tablas secundarias. Son las que insertaremos 
dentro de la tabla principal, para tener un mayor 
control sobre los elementos que conformarán 
nuestro sitio web. Son creadas a medida de acuerdo 
con su contenido. La cantidad de filas y columnas 
de cada una, es decir, las celdas, variarán según el 
diseño y layout que queramos lograr. 

e Alineación de tablas. Todas las tablas se pueden 
alinear horizontalmente a la izquierda, al centro y 
a la derecha. Pero la única que alinearemos será 
la tabla principal, ya que es la que verdaderamente 
influirá en la presentación de nuestro sitio, o sea, 
en cómo aparece en el navegador (centrado, 
alineado a la izquierda o a la derecha). 

e Alineación de celdas. Las celdas de una tabla 
también poseen alineación. A diferencia de la 
tabla, el contenido de la celda puede alinearse 
tanto en forma horizontal como vertical. Además de 


ANCHO DE TABLAS 


izquierda, centro y derecha, también existe supe- 
rior, medio e inferior. Esto nos permite alinear los 
elementos dentro de la celda con más libertad. 

e Línea horizontal (separador). Es un elemento 
muy práctico, que podemos insertar como separador 
entre párrafos de texto, imagen y texto, entre otras 
cosas. Podemos regular su ancho y alto, y su alinea- 
ción horizontal (izquierda, centro y derecha). 


A medida que adaptemos nuestros elementos 
gráficos a las tablas y celdas, junto con el texto 
que insertemos en Dreamweaver, veremos consi- 
deraciones y detalles importantes. No obstante, 
siempre debemos tener en cuenta que habrá 
modificaciones y retoques sobre la marcha, 
por imprevistos que surjan. 


DEFINICIÓN DE SITIO 

EN DREAMWEAVER 

La definición de sitio en Dreamweaver es el primer 
paso que debemos llevar a cabo cuando abrimos 
la aplicación y comenzamos a trabajar en un nue- 
vo proyecto (Paso a paso 1). 


Su relevancia radica en el funcionamiento del pro- 
grama en sí, ya que si no lo hacemos nos aparece- 
rán mensajes de advertencia y no tendremos una 
locación definida para guardar los archivos. 






Existen dos tipos de unidades de medida para manejar el ancho de una tabla: píxeles y por- 


centaje. La única tabla que programaremos en pixeles será la principal, ya que actúa como 


marco contenedor de todo. El resto de las tablas internas irán en porcentaje. 
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Definición de sitio 





ad 





Una vez creada la estructura de carpetas del proyecto, abra Dreamweaver y asegúrese 
de tener la ventana Archivos desplegada a la derecha. 


ii P Aplicación 


ii P Inspector de etiquetas 


Archivos 


Administrar sitios 
BZ Escritorio 

£ Disco local (C:) 

Ga Disco local (D:) 

LE Unidad de CD (E:) 

e» Disco extraible (F:) 

(2) Padrones 

(2) Quinta Aroma Verde 

(1) Sitio Web 


AA 





Allí, en la lengúeta Archivos, despliegue el menú y haga clic en la opción 
Administrar sitios. 
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| Administrar sitios 


Padrones 
Quinta Aroma Verde 
Sitio Web Sitio 


Servidor FTP y ROS 





Nombre del sito: 
Capeta rair loca Ces elsa Documents Sh sn nonire D 


Carpets predeterminada de mágenes: O 


vinalos relativos e: $ Doamento 


Direcoón MITP: http: ff 


Esta dirroción se vico para vinados relalbron 
al so y para que Venficador de vinados 
detecte los viados HTTP referidos a ss 


Duou vo 
Vinaidos con deliron enbe 
meyúsodes y mrúsoles: — Usar venficación de vinades con dstincón entre mayúsa das y mirúsodos 


Cati: Y] Acuvar caché 


S raché mansere la nformación de xecbrven 
y acuvos del 90o. Esto acelera las fandones 
de panel de Actves, adeiristración de 
vnados y Mapa dei sito. 





Se abrirá una nueva ventana. Primero debe asegurarse de elegir la lengüeta 
Avanzadas en el extremo superior izquierdo. Por ahora, use solo la categoría 
Datos locales y, en ésta, las opciones Nombre del sitio y Carpeta raíz local. 
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Delinicón del bo para InterWelb 


Básicas | Avanzadas | 


Membre del eta: InlerWeb 
Espeta rabo local: users Documenta So sn nombre O 
LS Diegir la carpeta ral local para el sitio inter Web: 
Seleccionar P Red =- 0 J opr 
Mambe Categoria Grupe dek- | Ubicación 


> 


Diir recenter 





En Nombre del sitio escriba el nombre del proyecto (solo sirve para referencia 
interna de Dreamweaver). En Carpeta raíz local presione en la pequeña carpeta 
amarilla de la derecha y se desplegará una opción para examinar directorios. 

Columnas vista archivo 
Contribute 


o G Elegir la carpeta raiz local para el sitio InterWeb: 














Seleccionar: |, InterWeb v G $ 


t Nombre Fecha mod... Tipo Tamaño 
wy i descargas 


Sitios recientes S 
L img 


| A L Originales 


Escritorio 


5 


elsa 


¡Ma 


Equipo 
Au: 


A 
Red 





Seleccionar: InterWeb 





Aquí debe seleccionar la carpeta principal del sitio. 
Una vez seleccionada, haga clic en Seleccionar. 
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iH P Aplicación 


¿Pe Inspector de etiquetas 


Archivos 


| Activos | Fragmentos 


e cjaspras]a 


A AN 
H-E descargas 
m- img 
H-E Originales 





Vuelva a la ventana de definición de sitio, presione Aceptar y, en la ventana 


Administrar sitios, haga clic en Listo. Si ha hecho todo bien, en la ventana 


Archivos se desplegará el sitio con sus subcarpetas. 


Algunos consejos que debemos tener en cuenta a la 
hora de armar nuestro sitio: 


e Lo primero que debemos hacer es tenerlo definido 
antes de comenzar a trabajar en él. 

e Si movemos nuestra carpeta principal a otra 
computadora, tendremos que volver a definirlo. 

e Si tenemos dudas respecto de si lo hemos definido 
o no, debemos definirlo nuevamente. 

e Si por accidente lo borramos de la ventana 
Administrar sitios (con la opción Quitar), no 
debemos preocuparnos, el sitio solamente se elimi- 
na de la base de datos de Dreamweaver, nuestra 
carpeta principal seguirá intacta en su lugar. 
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La ventana Archivos la usaremos muy seguido a lo 
largo del proyecto, por lo tanto, conviene que siga 
abierta. Lo que hemos hecho hasta ahora es muy im- 
portante para que nuestro sitio tenga una base sóli- 
da. Este tipo de organización termina por definir 
y mostrar, una vez que el sitio está terminado, si 
hemos realizado el trabajo en forma responsable. 


PROPIEDADES, ATRIBUTOS META, 
TABLAS Y CELDAS 

Es hora de armar nuestro esqueleto en HTML. La idea 
es construir la estructura sobre la que se va a montar 
el sitio. Ya hemos definido nuestro sitio, ahora comen- 
zaremos con nuestras páginas (Paso a paso 2). 
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Creación de archivo en Dreamweaver 


ii P Aplicación 


ii P Inspeđtor de etiquetas 


w Archivos = 
Archivos © Ea | Fragmentos 


== 
AR E 
S am Sitio - InterWeb (C:|... 

H- descargas 

H-B img 

a.) Originales 





Abra Dreamweaver y asegúrese de tener el sitio InterWeb desplegado en la barra 
de la derecha, en la opción Archivos de la ventana Archivos. 


Tipo de plenas a 

BTH «MÍNQUNO 

PBirmenta de hboirea | columna eldesca, centrada, encata 

2 ASF (Fragmento) L columns ja, Cerrada 

191.7 [pulga completa] Lepua Aia, Cora, ED 
Actercript l cora Astante, centrada 

l colima Rosante, omnbracla, granti 

T ioira riir, birra kabra da 
2 opira iici borna kotira di 

2 coirm pliusa, baria lateral iry 

3 colrrñós eli, barra lateral ir 

J ceirar fijas, bara lanana darai 
AEP ampt J coirn fijas, bara labana dee 
ASPET EE Jinis fjas, hara libana gyus 
SEP HET VA 2 columnas fijas, barra liberal quiet 
CoFuson 2 columnas Acsantes, barra lateral de 
Esaponante de Colifus! | 3 columnas ctantes, barraloteral de — To de Docamento: ÍA 1,0 de tenen | 
EF 2 colurmes fotantes, barra lateral loc PA ee 


Mo hay vela pera 


35 
Ivvaberqul 
XML 


1d dd 0 4 


e? atra 
Documento de HTML 


MAdcdd dd 


ANES a reid 


Pm 2 columas fotantes, barra lateral oc 


2 columns hbridas, barra lateral den | untar techo CES: 
2 columnas hibridas, bara lateral den | 
2 colmmnss hibriclas, barra Loberal io, * | 


r r |an , 


Moine mani 





Vaya al menú principal, a Archivo/Nuevo (CTRL+N). Le aparecerá una ventana 
con todas las opciones de creación de archivos. 
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Pons roaro e Ub rore 
Aee Arape » Tm TR - 





Allí, de izquierda a derecha, elija Página en blanco, Tipo de página: HTML 
y Diseño: <ninguno>. Luego, oprima Crear. Aparecerá un archivo en blanco 
en el área de trabajo. 


| LÄ Guardar como 





Guardar en: J} InterWeb z O2: 


Nombre Fecha mod... Tipo Tamaño Etiquetas 
Ly descargas 


Ly img 


Al L Originales 


Escritorio 


Nombre: index] 


Tipo: Todos los documentos (*.htm;”.html;”.shtm;”.shtml;hta;”. v 





Diríjase, nuevamente, al menú principal, a Archivo /Guardar como, y guarde el nuevo 
documento con el nombre index (todo en minúscula). 
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A a a 
Res oa 


E Sitio - InterWeb (C:1.. 
a- descargas 
a- img 
a- Originales 


T) index.html 





Si definió correctamente el sitio y guardó bien el archivo, lo verá en la opción 
Archivos de la ventana Archivos, en la barra de la derecha. 


Ya tenemos nuestra página principal (index. html) Ahora, trabajaremos con las propiedades de pá- 
creada y guardada en la carpeta del sitio. Como ob- gina, para así tener ciertas características del diseño 
servamos, se pueden crear muchos tipos de archivos ordenadas. Hay tres formas de acceder a éstas: 
en Dreamweaver. Nosotros emplearemos la gran CTRL+J, presionar el botón derecho del mouse 
mayoría del tiempo el tipo HTML en blanco. sobre el área de trabajo, o el botón Propiedades 


de la página, en la parte inferior de la barra de 
Propiedades, como vemos en el Paso a paso 3. 


Se pueden crear 
muchos tipos de archivos 
en Dreamweaver 
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Propiedades de página 


Propiedades de la página 


Categoría Aspecto 





Vínculos Fuente de página: 
Encabezados í r 
Título /Codificación Tamaño: v [píxeles + 
Imagen de rastreo A 
Color del texto: El 
Color de fondo: 
Imagen de fondo: o 


Repetir: 





Margen izquierdo: píxeles ~ | Margen derecho: pixeles 


Margen superior: [píxeles ~| Margen inferior: píxeles 








Acceda a las propiedades de página con cualquiera de las formas descriptas arriba. 
Aparecerá una ventana con dos columnas: Categoría y Aspecto. 


Propiedades de la página 
Categoría Aspecto 


Vinculos Fuente de página: Arial, Helvetica, sans-serif 


Encabezados _ — — 
Título/Codificación Tamaño: 12 F 


Imagen de rastreo —— 
Color del texto: P #000000 








Color de fondo: El FOCCOCC 


Imagen de fondo: 


Repetir: 








Margen izquierdo: 0 Margen derecho: píxeles 
Margen superior: 0 Margen inferior: pixeles 


bm a 


Las categorías en las que se enfocará serán Aspecto, Vínculos y Título/Codificación. 











En Aspecto, seleccione en Fuente de página Arial, Helvetica, sans-serif, 
en Tamaño, 12 píxeles, en Color del texto, negro (4000000), en Color de fondo, 
gris claro (*CCCCCC) y en Margen Izquierdo y Margen superior, 0. 

Haga clic en Aplicar para ver el nuevo color de fondo del documento. 
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Propiedades de la página 


Categoría Vínculos 


Aspecto — 
Fuente de vinculo: (Igual que fuente de página) 
Encabezados . -e i 
Título/Codificación Tamaño: v [píxeles v 
Imagen de rastreo 


Color de vínculo: M| #0000FF vinculos de sustitución: [| #FF0000 


Vinculos visitados: El #990099 Vinculos activos: F| #FF0000 


Estilo subrayado: | Siempre subrayar y 








Pase a Vínculos. En Color de vínculo, elija azul pleno (#0000FF), 

en Vínculos visitados, violeta (4990099) y en Vínculos de sustitución, 
rojo pleno (#FF0000). Si lo desea, también tiene la posibilidad de colocar 

este último color en Vínculos activos. 


Propiedades de la página 


Categoria Titulo/Codificación 


Aspecto 

ads Título:  InterWeb 

Encabezados 

ma tn Too de doamento TD): 


Imagen de rastreo 
Codificación: [Unicode (UTF-3) y 
Formulario de normas Unicode: |C (descomposición de compatibilidz y 


[E] Incluir firma Unicode (BOM) 








Carpeta de documentos: C:\Users\elsa\Desktop\Users\InterWeb} 
Carpeta del sitio: C:\WUsers\elsa\Desktop\Users\InterWeb\ 











Pase a Título/Codificación. Allí, escriba en Título el nombre del sitio web, 
es decir, InterWeb. Oprima Aplicar y, luego, Aceptar. 
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Acabamos de definir las propiedades de la página. 
Como seguramente hemos visto, hay algunas cate- 
gorías que no utilizamos y hay otras de las que no 
establecimos todas sus opciones. 


En Aspecto, configuramos las propiedades del texto 
predeterminado de todo el documento. Por supuesto 
que luego podemos cambiarlo. También determinamos 
el fondo y los márgenes. En Vínculos, establecimos 
los colores de los vínculos en estado de reposo, 
activo (cuando alguien hace clic), de sustitución 
(cuando alguien se posiciona encima con el mouse) 
y visitados. En Título/Codificación, configura- 
mos el título de la página, que se mostrará en el ex- 
tremo superior izquierdo de la barra del navegador. 


Ahora trabajaremos con los atributos meta del si- 
tio. Como ya habíamos visto, son palabras y frases 
que se colocan en cada página para indexarlo en los 


En Aspecto, configuramos 
las propiedades del texto 
predeterminado de todo 
el documento 


ESTILO DE LOS VÍNCULOS 


buscadores (Google, Yahoo!, entre otros). Si están bien 
programados, serán de gran ayuda para que InterWeb 
figure en los primeros lugares de su categoría. 
Los atributos meta son invisibles para los usuarios o 
navegantes, ya que se encuentran en el encabezado 
del documento HTML, es decir, dentro de la etiqueta 
<head>. Solo los robots de los motores de búsque- 
da y otros programadores web pueden verlos. 


Las tres variables que los conforman son: Meta, 
Palabras clave y Descripción. A continuación, 
las programaremos (Paso a paso 4), pero antes es 
importante que tengamos desplegada una barra de 
opciones pertenecientes al encabezado del docu- 
mento. Para poder visualizarla debemos ir a Ver/ 
Contenido de Head, en el menú principal. Al traba- 
jar en Dreamweaver, debemos revisar que la opción 
esté activada, ya que es la única manera de editar las 
variables después de haberlas creado (Figura 4). 








En las propiedades de página, en la categoría Vínculos, encontraremos la opción Estilo 


subrayado, que sirve para controlar el subrayado de los vínculos. Su opción predeterminada es 


Siempre subrayar; también se usa Mostrar subrayado solamente al situar el cursor encima. 
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Acercar Ctrl+ + 
Alejar Ctrl+- 


Aumentar y reducir 


Ctrl+ Ált+0 


Ajustar selección 


Ajustar todo Ctrl+Mayús+0 


Ajustar ancho Ctrli+Alt+Mayús+0 


Código 
Diseño 


Código y diseño 


Alternar vistas Ctrl+; 


Actualizar wista de diseño FS 


Contenido de Head Ctrl+MWMayús+H 
Mo hay contenido de script 

Modo de tabla 

Ayudas visuales 

Representación de estilos 


Opciones de vista de Código 


Reglas 

Cuadricula 

Guías 

Imagen de rastreo 


Plug-ins 


Visualizza file esterni 
Ocultar paneles 


Barras de herramientas 





FIGURA 4. La barra de opciones del encabezado 
aparecerá justo encima de la regla horizontal 
en pixeles del documento. 


BUSCADORES 


Como hemos podido observar, el icono que contiene 
las variables de los atributos meta posee otras tres 
herramientas: Actualizar, Base y Vínculo. La que 
nos puede llegar a ser útil es la primera, que sirve 
para actualizar automáticamente una página. 


Tiene dos opciones: Demora y Acción. Demora debe 
programarse en segundos, y es lo que tardará la pá- 
gina en actualizar. Por ejemplo, si deseamos que sea 
1 minuto, debemos escribir 60. La segunda tiene dos 
variables: Ir a URL y Actualizar este documento. 
Si seleccionamos Ir a URL, deberemos escribir un 
link válido para que salte automáticamente a esa 
nueva página. Si seleccionamos Actualizar este 
documento, la misma página web volverá a cargar. 
Esta última opción se usa mucho en los diarios 
digitales, ya que como son actualizados constante- 
mente, es una manera práctica para que al usua- 
rio se le despliegue la nueva información al pasar 
un determinado tiempo. 


Es hora de dedicarnos al cuerpo de nuestro documen- 
to HTML, mejor conocido como body en el ambiente 
web. Todo el contenido de una página va dentro de 
tablas, nada va suelto. Esto es así porque es la única 
manera que tenemos de mantener los elementos de 
nuestra página ordenados y controlados. 


La mayoría de los buscadores importantes [Yahoo!, Google y otros) no utilizan, solamente, los 


atributos meta para indexar un sitio en sus listas. Otros dos requerimientos importantes son 


que el sitio en cuestión genere tráfico y que tenga vínculos externos con otros sitios. 


RedUSERS: 


» 5 Diseño en HTML 








122 


Programación de atributos meta 


W Adobe Dreamweaver CS3 - [C:\Users\elsa\Desktop\Users\InterWeb\index.html (XHTML)*] 
Archivo Edición Ver Insertar Modificar Texto Comandos Sitio Ventana Ayuda 
į w Insertar Común Diseño | Formularios | Datos | Spry | Texto | Favoritos 
104058 0-4-85Q9-9-0-8 

A == Y z Eb Meta | a 

(ie! A EZ A Palabras clave 
‘| [s>] Código ividi Título: Interweb (ER Descripción 

¡$ Actualizar 


+ Base 
rr 1213] Vínculo 


Con la página index.html abierta en el área de trabajo, vaya a la barra 

de herramientas horizontal, asegúrese de que la opción Común esté seleccionada 
en las lengúetas superiores, y haga clic izquierdo sobre la flechita negra 

del cuarto icono contando desde la derecha. 





rr rl 


Meta 


Atributo: Valor: InterWeb 


Contenido: hosting, diseño de sitios web, multimedia, soluciones digitales), 


digitalización, servidor, servicio de hosting, servidores, páginz 





En el menú que se despliega, elija la primera opción (Meta). En la ventana que se abre 
en pantalla, escriba InterWeb, en la opción Valor, y varias palabras y frases cortas 
separadas por coma en la opción Contenido. Éstas tienen que tener relación 

con el rubro de InterWeb, como hosting, empresa de diseño web, web, etcétera. 
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Una vez que haya terminado, oprima Aceptar. Verá que aparece un nuevo icono 
en la barra de opciones del encabezado. Si lo selecciona, observará que en la barra 
de Propiedades aparece la variable Meta con todo el contenido que programó. 


A A A co PAPA PARA ATAR APRA cc PARRA cc PROA o PYPPAA Lc PUTA 


Palabras clave 


Palabras dave: 


diseño, hosting, página, páginas, web, sitios 
web, pájinas web, pajinas web, pagina web, 
multimedia, servidores, servidor, servicio de 





Vuelva al icono de la barra de herramientas horizontal y seleccione la segunda opción 
(Palabras clave). Aparecerá otra ventana con una sola opción: Palabras clave. 
Allí, escriba palabras y frases relacionadas con el rubro de InterWeb. Algunas de éstas 
pueden ser iguales a las que escribió en Meta. Use plural, singular, femenino, masculino 
y errores ortográficos. Por ejemplo: diseño, web, hosting, josting, páginas, pagina, 
pajina, etcétera. La cantidad no debería ser menor de 30. 


RedUSERS: 123 


» 5 Diseño en HTML 








124 





Pesii AZ 
€ Pinpiniades 
Palabra desta, hostra, (igna, págrias, web, tos web, pjnas web, |= 
+ mile 


dla pajrás web, paga web, da, pervidoréel, enii, 
o] 





Al terminar, oprima Aceptar y verá el icono de Palabras clave en la barra 


de opciones del encabezado. Al igual que con Meta, si lo selecciona podrá modificarlo 
desde la barra de Propiedades. 


A S ia 


Descripción 


Descripción: 


diseño, programción y hosting para su sitio a 
web. Nuestros servidores son dedicados y 
contamos con servicio técnico las 24 horas. 





Vuelva, por última vez, al icono de la barra de herramientas horizontal y seleccione la tercera 
opción (Descripción). Allí, escriba unos dos párrafos de entre dos y cuatro líneas cada uno. 
Éstos deben ser un resumen de lo que el usuario encontrará en el sitio, es decir, lo que éste 
puede ofrecerle. Por ejemplo: InterWeb ofrece los mejores precios a la hora de... 
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"e Propiedades 


Desrpaón: Ah gbe ka eai eros de dscño, programación y |. 
pan hadtu paa tu bs web, Muertos tenidorel torn dedicados: y 
tóntimos tón terañs tiro lid JA Forista, 





Igual que con las otras dos variables, al terminar, presione Aceptar 
y verá el icono de Descripción en la barra de opciones del encabezado. 
Desde allí, lo podrá editar cuando desee. 


Una tabla se puede insertar de tres formas diferentes 


(Paso a paso 5): ir al menú principal a Insertar/ Recordemos que todo 
Tabla, con CTRL+ALT+T, o hacer un clic izquierdo el contenido de una página 


en el cuarto icono de la barra de herramientas hori- 


zontal, contando de izquierda a derecha (Tabla). va dentro de tablas 


») CÓDIGO HTML 


Antes de que existieran los programas de edición de HTML, los sitios debían programarse, 
directamente, en el lenguaje de etiquetas HTML. Esto se hacía en un simple editor de texto. 
Un sitio web podía demorar de uno a dos meses en ser programado. 
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Tabla principal 


Tabla 
Tamaño de tabla 


Filas: | 1] Columnas: 1 


Ancho de tabla: 100 


Grosor del borde: Pixeles 


o 
Relleno de celda: O 
Espacio entre celdas: O 


Encabezado 


Accesibilidad 
Texto: 


Alinear texto: | Predeterminado T 


Use cualquiera de las formas mencionadas arriba para que se despliegue el menú 
de inserción de tabla en el área de trabajo. 





Tabla 
Tamaño de tabla 


Filas: . Columnas: 1 


Ancho de tabla: 950 


Grosor del borde: O Pixeles 
Relleno de celda: 0 
Espacio entre celdas: O 


Encabezado 


Accesibilidad 
Texto: 





En la opción Filas, escriba 2; en la opción Columnas, 1; en Ancho de tabla, 950 
y asegúrese de que a la derecha diga Píxeles. Coloque 0 en Grosor del borde, 
al igual que en Relleno de celda y Espacio entre celdas. 
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Una vez que haya terminado, oprima Aceptar. Verá que aparece la tabla en el área 
de trabajo y podrá observar todas sus características en la barra de Propiedades. 


Filas |2 o| An 950 Ip. +] Rell. celda o | Alinear (Izquierda x] Clase Ninguna 


a |] Esp. celda |0 | Borde Peba y 
To =— Centr: 
253 Col, fondo [ || Col. borde [ J | Derecha 


Im. Fondo | 190 











En la barra de Propiedades, cambie la opción Alinear de Predeterminado 
a Izquierda. Esto hará que la tabla se alinee a ese lado. Procure que todo el resto de 
las opciones tenga los valores que le había colocado en la ventana de creación de tabla. 
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¿Por qué programamos la tabla principal de nuestra 
página de esa manera? Hagamos un análisis: 


o Filas: le colocamos dos filas porque, si revisa- 
mos bien el diseño estático preliminar, veremos 
que el encabezado ocupa todo el ancho de la pági- 
na, mientras que todo lo que viene debajo, en su 
conjunto, ocupa todo el ancho. La primera fila se 
destinará al encabezado, y en la segunda se inser- 
tarán otras tablas para armar el resto. 

Columnas: le colocamos una columna porque las 
divisiones que se ven en la segunda fila, si bien 
son varias, las ubicaremos en las tablas secundarias. 
Con respecto a la primera fila, tiene una sola columna. 
Ancho de tabla: colocamos 950 pixeles porque, 
como habíamos aclarado, la tabla principal es la 
única cuya medida va en pixeles, ya que actúa 
como marco contenedor. Los 950 se deben a que 
la resolución estándar de monitor, hoy en día, es 
de 1024 x 768 pixeles y porque no todos los 
monitores son iguales, además de que las diferentes 
barras de herramientas de los navegadores quitan 
espacio, siempre es conveniente entre 50 y 100 
pixeles por debajo del ancho máximo. 
Recordemos que nuestro objetivo principal es que 
no haya barra de desplazamiento horizontal. 
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Por supuesto que 

las propiedades 

de nuestra tabla principal 
variarán según el diseño 
que queramos lograr 


e Grosor del borde: colocamos cero porque, en 
la gran mayoría de los casos, la tabla principal no 
lleva borde, ya que va pegada a los márgenes para 
usar la mayor cantidad de espacio disponible. 

e Relleno de celda: también colocamos cero, 
porque si deseamos que haya espacio entre el 
borde de las celdas de la tabla principal y su con- 
tenido, se lo damos con tablas secundarias o, en el 
caso de una imagen, con más aire en los márgenes 
del lienzo de trabajo en Fireworks. 

e Espacio entre celdas: colocamos cero ya que, 
si deseamos que haya un cierto espacio entre las 
diferentes celdas de la tabla principal, usamos los 
mismos principios que en Relleno de celda. 


Por supuesto que las propiedades de nuestra tabla 
principal variarán según el diseño que queramos 
lograr. Para el caso del sitio de InterWeb, la tabla 
principal tendrá las características antes menciona- 
das, pero para otro, seguramente, serán diferentes. 


Ahora, nos concentraremos en las tablas secunda- 
rias de la segunda fila de la tabla principal, ya que 
en la primera solo irá el encabezado insertado co- 
mo imagen. Comenzaremos por una que tenga 
tres columnas y tres filas, luego explicaremos el 
porqué (Paso a paso 6). 
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Primera tabla secundaria 


Tabla 


Tamaño de tabla 


Filas: 2 Columnas: A 


Ancho de tabla: 950 


Grosor del borde: U 
Relleno de celda: o 


Espacio entre celdas: | O 


Encabezado: 


Aoœæsibilidad ~ 
Texto: 


Posiciónese con el cursor dentro de la segunda fila de la tabla principal. 
Luego, con alguna de las formas descriptas para insertar una tabla, vuelva a abrir 
la venta de inserción de tabla. Verá que todavía figuran los datos de la tabla principal. 


Tamaño de tabla 
Filas: . Columnas: 3 
Ancho de tabla: 100 
Grosor del borde: Pixeles 


Relleno de celda: En 


Espado entre celdas: H 
Encabezado aC 


Acesbtidad 


Texto: 
Alinear texto: | Predeterminado r 


En la opción Filas, escriba 3; en Columnas, 3; en Ancho de tabla, 100 
y asegúrese de que a la derecha diga Porcentaje. Coloque O en Grosor del borde, 
y 3 en Relleno de celda y Espacio entre celdas. 
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Una vez que haya terminado, oprima Aceptar. Verá que aparece la tabla dentro 


de la segunda fila de la tabla principal. Si se encuentra en otro lado, oprima CTRL+Z 


para deshacer y repita el procedimiento. Podrá observar todas las características 
de la nueva tabla en la barra de Propiedades. 


No hace falta que cambiemos la opción Alinear 
en la barra de Propiedades, ya que el ancho de 
la nueva tabla es 100%, con lo que ocupa todo 
el ancho de la fila donde la insertamos, es decir, 
950 pixeles. Si la alineamos a la izquierda, al cen- 
tro o a la derecha, no va a haber diferencia. 


Igual que con la tabla principal, hagamos un 
análisis punto por punto: 


e Filas: le colocamos tres filas porque en el diseño 
estático preliminar tenemos, en la columna del 
medio, la primera celda para la barra de navegación, 





O CAMBIOS EN LOS TAMAÑOS DE TABLAS Y CELDAS 


Mientras más altos sean los valores que coloquemos en Relleno de celda y Espacio 


entre celdas en una tabla, más espacio le robarán, debido a que toman su medida (res- 


tan) del ancho y alto de la tabla o celda. 
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la segunda para el contenido y los banners, y la 
tercera para el pie de página. 

e Columnas: le colocamos tres columnas porque 
tenemos, de izquierda a derecha, la primera celda 
ocupada por una línea divisoria, una celda en 
medio, donde va la barra de navegación, los blo- 
ques de texto y el pie de página, y otra línea 
divisoria en la última celda. 

e Ancho de tabla: colocamos 100% como medida 
porque, como aclaramos más arriba, la tabla prin- 
cipal actúa como marco contenedor con una 
medida de 950 pixeles. De esa forma, la tabla 
secundaria ocupará todo el espacio disponible, ya 
que su 100% serán los 950 pixeles. 

e Grosor del borde: colocamos O porque, por 
ahora, no queremos que esta tabla tenga borde. 
Si luego nos arrepentimos o cambiamos de idea, 
no hay problema, podemos modificar las propie- 
dades en cualquier momento. 





e Relleno de celda: aquí, colocamos tres para que 
las celdas de la nueva tabla tengan un poco de 
sangría. Podríamos haber escrito cinco, siete O 
cualquier otra medida que nos plazca, tiene que 
ver con la decisión de diseño personal de cada uno. 

o Espacio entre celdas: escribimos tres por la 
misma razón que en Relleno de celda, digamos 
que puede ser un estándar. Si en algún momento 
consideramos que tiene que ser más, o menos, 
lo podemos modificar. 


Seguramente, ya hemos notado que falta algo, o 
mejor dicho, que sobra. Lo que realmente necesi- 
tamos de esta tabla secundaria son las columnas, 
las filas están de más, excepto por las del medio. 
Entonces, ¿cómo hacemos? Fácil, las unimos para 
transformarlas en una sola, de la misma manera 
que haríamos en Microsoft Excel. Lo haremos 
con las filas uno y tres (Paso a paso 7). 


Las propiedades de 
nuestra tabla principal 
variarán según el diseño 
que queramos lograr 


») ANCHO Y ALTO DE CELDAS Y TABLAS 


En la gran mayoría de los casos, la altura de una tabla o celda está dada por el contenido, es 
decir que rara vez la tendremos que programar nosotros. En este sentido, es muy diferente 
lo que sucede en cuanto al ancho, ya que éste es el que estructura el contenido. 
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Marque las celdas de la primera fila con el mouse. Para hacer esto, posiciónese en la celda 
superior, mantenga el botón izquierdo oprimido y arrastre el mouse hasta la celda inferior. 


<body> <table> <tr> <td> £table>] 


Fuente Arial, Helvetica, s: + Tam [E CM R n= 000000 | 





En la barra de Propiedades, en la parte inferior izquierda, verá dos pequeños iconos, 
justo debajo de donde dice Co1. El de la izquierda combina las celdas 

(Combina las celdas seleccionadas usando extensores) y el de la derecha 
las divide (Divide la celda en filas o columnas). Presione el de la izquierda. 


RedUSERS: 


132 


Diseño en HTML 





) 
res rem” v . J 


2) ad 23 dr | 4 Daño Tila nared 


e AT ba i 
Bt ©. e T. a. p i Í mpos pigra 





Y 305 wide 


_ Rid me pa ru ar 





Proceda de la misma manera con la tercera fila de la tabla. 


Marque todas las celdas y oprima el botón para combinarlas. 


Las filas uno y tres deben haber quedado unificadas en una sola celda. 


Ya tenemos la primera tabla secundaria lista. Antes 
de insertar la siguiente, modificaremos el ancho de 
las celdas de ésta. Hay dos formas de hacerlo: usar 
el mouse para arrastrar el borde o posicionarse den- 
tro de la celda y colocarle un valor en pixeles o por- 
centaje al ancho. Nosotros utilizaremos la segunda. 


TABLAS DENTRO DE TABLAS 


Una vez que nos hayamos posicionado con el cursor 
dentro de la celda de la izquierda, iremos a la propie- 
dad Ancho de celda en píxeles o porcentaje, 
en la barra de Propiedades, indicada por An. Allí, 
escribiremos 5% (Figura 5). Haremos lo mismo con la 
celda de la derecha. Achicaremos aún más las celdas. 





No debemos tener miedo ni reparo de insertar todas las tablas que consideremos necesarias 
para lograr el diseño deseado. Lo que es importante tener en cuenta, es qué propiedades 
tiene cada una y dónde están ubicadas, para poder modificarlas o borrarlas. 
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FIGURA 5. 

Si movemos el borde 
con el mouse luego 

de haber colocado 

el valor, éste cambiará. 


El movimiento manual || |=; celda 
del borde tiene prioridad 25 


sobre el valor escrito. 


Nos queda una cosa más por hacer antes de con- 
centrarnos en la siguiente tabla: dividir en dos 
columnas la celda del medio de la segunda columna 
(Paso a paso 8). De este modo, nos quedará 
espacio para los banners a la derecha y para la se- 
gunda tabla secundaria a la izquierda. 


Ahora sí, ya estamos listos para insertar la segunda 
tabla secundaria (Paso a paso 9). La colocaremos en 
la celda del medio de la segunda fila de la última 
tabla que insertamos. Tendrá dos filas y una columna. 


Al igual que con la primera tabla secundaria, no 
hace falta que cambiemos la opción Alinear en 
la barra de Propiedades, ya que el ancho de la 
nueva tabla es 100%, con lo que ocupa todo el 
ancho de la celda donde se encuentra. Volvamos a 
hacer nuestro análisis punto por punto: 


© 


Dd vet (redee z 





REVISIÓN Y CORRECCIÓN DE CELDAS Y TABLAS 


<body> <table> <tr> <td> <table> <tr> [£td>] 


Formato [Ninguno ~] Estilo Ninguna e [55 
Fuente Arial, Helvetica, s: ~ Tam E ~ [pixele we | | | #000000 


Horiz an[ EM No aj. [A] Fnd | 


a Ancho de celda en píxeles o porcentaje 


o Filas: le colocamos dos filas porque en el diseño 
estático preliminar podemos observar, claramente, 
que la primera será para el título y la segunda 
será para el texto. 

e Columnas: le colocamos una columna porque 
crearemos otra tabla para dividir el texto de la 
segunda fila, es decir, insertaremos una tercera 
tabla secundaria. 

e Ancho de tabla: colocamos 100% como medida 
porque así ocupará todo el espacio disponible de 
la celda donde la insertamos. 

e Grosor del borde: colocamos cero porque, por 
ahora, no queremos que esta tabla tenga borde. 

e Relleno de celda: escribimos tres como algo 
estándar. Después, podemos cambiarlo. 

e Espacio entre celdas: también colocamos tres 
como medida estándar. Si después queremos que 
sea más o menos, lo podemos modificar. 





Es posible que en los primeros diseños web que realicemos, cometamos errores a la hora de 


destinar filas y columnas en las tablas. Probablemente, nos sobren o nos falten celdas, por 


eso es importante estar muy atentos al diseño estático preliminar de Fireworks. 
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División de celdas 


<body> <table> <tr> <td> <table> <tr> Eia] 


Fuente Arial, Helvetica, si ~ Tam y [píxele ) I| [#000000 | 
Horiz [Predet | Anl oOo 
| Divide la celda en filas o columnas 





Posiciónese con el cursor en la fila del medio de la segunda columna de la tabla 
secundaria. Visualice el botón para dividir las celdas, ubicado en la parte inferior 
izquierda de la barra de Propiedades, a la derecha del usado anteriormente. 


-| Dividir eelda 0 L 


Dividir celda (7 Fil 


=S 


8) Columnas 


Número de 7 





Oprima el botón. Aparecerá una ventana con opciones para dividir la celda en columnas 
o filas. En Dividir celda, seleccione Columnas y elija 2 abajo. 
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Oprima Aceptar. Verá que la celda del medio ahora tiene dos columnas. 


Para terminar nuestra estructura HTML, necesita- 
mos insertar una última tabla, la tercera secundaria, 
que irá dentro de la fila inferior de la segunda 
secundaria (Paso a paso 10). 


Como hemos hecho con todas las otras tablas, 
analicemos cada parte: 


ESTRUCTURAS PARECIDAS 


© 


e Filas: le colocamos una fila porque es todo 
lo que necesitamos. 

e Columnas: elegimos dos columnas porque es allí 
donde escribiremos nuestro texto. 

e Ancho de tabla: determinamos 100% como 
medida porque así ocupará todo el espacio dispo- 
nible de la celda donde la insertamos. 






Es probable que encontremos cantidad de sitios con estructuras parecidas o iguales. Esto es 
perfectamente común, ya que hay una cantidad finita de diseños estructurales aplicables. Sin 


lugar a dudas, el diseño gráfico de cada uno será diferente, pero la base puede ser la misma. 
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Segunda tabla secundaria 


Tabla 


Tamaño de tabla 


Filas: Columnas: 3 


Ancho de tabia: 


Grosor del borde: Pixeles 
Relleno de celda: : A 


Espacio entre celdas: 
Encabezado 


EEE 
Eta 
ETE 
EEE 


a 


Accesibilidad 





Texto: 


Posiciónese con el cursor en la columna de la izquierda de la celda que dividió antes. 
Luego, con alguna de las diferentes formas para insertar una tabla, vuelva a abrir la ventana 
de inserción de tabla. Verá que aún figuran los datos de la primera tabla secundaria. 


Tabla 
Tamaño de tabla 
Filas: Columnas: 
Ancho de tabla: 100 
Grosor del borde: Pixeles 


Relleno de celda: 3 an 


Espacio entre celdas: 


EFE 
jme] 
Cae 
ETE 


Ninguna 


Accesibilidad 


Texto: 





En la opción Filas, escriba 2; en Columnas, 1; en Ancho de tabla, 100 
y asegúrese de que a la derecha diga Porcentaje. Coloque 0 en Grosor del borde, 
y 3 en Relleno de celda y Espacio entre celdas. 
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Una vez que haya terminado, oprima Aceptar. Verá que aparece la tabla dentro 

de la celda donde se había posicionado. Si se encuentra en otro lado, oprima CTRL+Z 
para deshacer y repita el procedimiento. Podrá observar todas las características 

de la nueva tabla en la barra de Propiedades. 


e Grosor del borde: colocamos cero porque, por Nunca nos debemos olvidar de guardar los cam- 
ahora, no queremos que esta tabla tenga borde. bios en el documento, y ahora es un muy buen 

o Relleno de celda: escribimos tres como algo momento para hacerlo. 
estándar. Después, podemos cambiarlo. 

e Espacio entre celdas: también establecimos 
tres como medida estándar. Si después queremos 
que sea más, o menos, lo podemos modificar. 


Por ahora, hemos terminado de armar la estructura 
que necesitamos. Por supuesto que va a sufrir cam- 
bios más adelante, pero de a poco tenemos lista 
gran parte de la base de nuestro diseño de tablas. 
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Tercera tabla secundaria 


Tabla 


Tamaño de tabla 


Filas: 1 Columnas: 2 


Ancho de tabla: 100 


Grosor del borde: O Pixeles 
Releno de celda: 3 


Espacio entre celdas: 3 


Accesibilidad 





Posiciónese con el cursor en la celda de abajo de la última tabla que insertó. 

Luego, con alguna de las diferentes formas para insertar una tabla, vuelva a abrir 

la ventana de inserción de tabla. En la opción Filas, escriba 1; en Columnas, 2; 

en Ancho de tabla, 100 y asegúrese de que a la derecha diga Porcentaje. 

Coloque 0 en Grosor del borde, y 3 en Relleno de celda y Espacio entre celdas. 


¿bodi> «tables <b> <6d> «tables ci > hd «bles 77 «d+ EEES 





Una vez que haya terminado, oprima Aceptar. Si aparece en otro lado, presione 
CTRL+Z para deshacer y repita el procedimiento. Podrá observar todas las 
características de la nueva tabla en la barra de Propiedades. 


RedUSERS: 


D 5 Diseño en HTML 





REVISIÓN DE DISEÑOS WEB 

En esta sección, la idea es ver algunos diseños 
de sitios web para analizar su estructura de tablas. 
De esta manera, podremos compararlos y analizar 
el uso que hacen de éstas para darle forma al con- 
tenido, tanto textual como gráfico. 


La revisión de cada sitio constará de dos partes. 
Primero lo veremos en un navegador y, luego, en 
Dreamweaver. ¿Cómo podemos acceder a ver una 
página en Dreamweaver si no la hicimos nosotros? 
Lo único que tenemos que hacer es guardarla en 
nuestro escritorio, o en la locación que deseemos. 
En cualquier navegador, vamos a Archivo /Guardar 
como y, en la ventana con opciones, seleccionamos 
Página web completa, en la opción Tipo. 


Cabe hacer una aclaración muy importante. Muchos 
de los sitios web actuales pertenecientes a grandes 
empresas de cualquier rubro (comercial, informativo, 
social, etcétera) usan páginas dinámicas (archivos 
con extensión ASP o PHP), que no emplean el tipo de 


FIGURA 6. 


La primera conclusión 


Cruceros | 
Veleros j 
Lanchas j 
Semirrigidos | 
Motos y Jet J 
Motores Í 
Varios Í 


m 
ASESORARSE BIEN 


que podemos sacar es que 
la tabla principal es más 
chica que la que usamos 
nosotros para InterWeb. 
Posiblemente, 

sea un sitio programado 
para resolución 


= EL TIEMPO Xo 
de monitor 
de 800 x 600 pixeles. 
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tablas que hemos trabajado nosotros, sino capas flo- 
tantes dinámicas, que actúan de forma diferente. 


Los que vamos a revisar están programados en 
tablas como las nuestras. El primero que vamos a 
analizar es D' Agostini Barcos (Figura 6), dedi- 
cado a la venta de embarcaciones. Su dirección es: 
http://www.dagostinibarcos.com.ar . 


La revisión superficial nos muestra que está bien 
estructurado. Podemos observar un encabezado, 
una sección para contenido y un pie de página. 
Es interesante notar que hay dos barras de nave- 
gación: una más general y otra más específica. 
Ahora la veremos en Dreamweaver para evaluar su 
estructura de tablas (Figura 7). 


Observamos que hay muy poco texto escrito directa- 
mente en HTML, la mayoría del contenido son imá- 
genes insertadas, probablemente, trabajadas con 
Fireworks o Photoshop. Hay un archivo Flash inser- 
tado (el recuadro gris con la letra F) y dos banners 


D'AGOSTINI Barcos« 


venta y fasaconpe embarcaciones] 
ODO DE EMOCIONES] pd 


SiO) EMPRESA 


Todas las embarcaciones ofrecidas, han 
sido minuciosamente revisadas su estado 
y documentación, directo de titulares 
registrales, lo que garantizan, operaciones 
transparentes y transferencias inmediatas. 


GRACIAS POR SU VISITA, SALUDO 


ATENTAMENTE 
Marcelo A. D'Agostini 
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a A Baroshim Y A 
jorto [Eoma ae] Tiue DAGOSTIK lanit 
i 3 m ar, 


y ed bli 
e mia a Pei 
PT midid AO PERME 


ja (Ja LER: 


3 
i 
3 
3 
3 
3 
i 
1 
i 


; GRACIAS 


dd 
1 
Em 


a la izquierda, colocados en la misma columna de 
la barra de navegación vertical. Todo está dentro 
de tablas, nada suelto. Quizá se podría usar el es- 
pacio vacío entre la parte de contenido y el pie de 


Bienvenido a | 
Cáritas Argentina 


AAA nos hace Son 


O A A pa A a LT HIFI A CI, PE 


Mes de la Solidaridad Iniciativas “Una frazada 
para mi hermano” y “Pies 


calentitos” 


Región Litoral- Entre Rios: 


y acuerdos de trabajo 


Agosto, mes de la 


ul 


econ 
lu burma 
d6 iyudar 


espacio de Iralemidad, raain y de 
sllboración de acuerdes ohra 
dwers terna del 
Faucons y el fincionamierás | 
regonal ese tn de semana se reslzó | 
la Reunión Regional LiboralLrare His. 
La maña tuvó ligar en el pimss dè | 
2 | Escobar, en la coma norle de provincia | 
| de Fuimos ¿nes parias a la | 
dizah de Táritr-Campara 


Raj me ham “Una Farei para ma |= 


"Exlarmas coma cerca, qe en Cindoba 
q Dirina + 
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construir juntos reflexión | 


Gon el obio de compara =E 


quehacer || 


wear mida 
R 


5 p= E 7 E 


reanena han j 
mente renzadas du estado r 


ao meri 
ly documentación: directo de titulares i 
registrales, lè que garantizan, operaciones; 
¡EranEDaCentes y traosferencias inmediatas | 


POR SU VISITA, SALUDO | © 

ATENTAMENTE Ñ 

FIGURA 7. 

Se nota la existencia 
de más de una tabla, 
aunque prácticamente 
todo está basado 


en la tabla principal. 


página para agregar algo más, o para achicarlo. 
El segundo sitio que revisaremos es Caritas Argenti- 
na, perteneciente a la pastoral caritativa de la Iglesia 
Católica: http://www.caritas.org.ar (Figura 8). 


Doenas Mores. Aperiza 


| | FIGURAS. 
ç Vemos que es 


| 

| 

| mucho más complejo 
E l 

BEN 


AE aaa vila E 
EL [| social 


que el anterior. 


Seguramente, 


Te rið 


7 
en Cáritas T 


F 


tiene varias tablas, 
una dentro de otra. 
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Iremos, directamente, a Dreamweaver, y lo primero 
que observamos es que el encabezado animado que 
veíamos en el navegador no aparece. Esto se debe a 
que está hecho en Flash y muy posiblemente éste 
haya sido programado para no permitir que los 
usuarios puedan guardarlo en su máquina. 


Más allá de eso, vemos una tabla principal de 800 
pixeles de ancho alineada a la izquierda, con hasta 
tres niveles de tablas secundarias. Si las revisamos, 
podremos apreciar que ninguna de ellas tiene su 
medida en porcentaje. Esto se debe a que la celda 
donde están colocadas sí tiene medida y está en 
pixeles, lo que hace que actúe como marco conte- 
nedor. El contenido también ayuda a darle forma. 
Aquí, notamos que hay más texto escrito en HTML y, 
además, varias imágenes insertadas. 


El tercer sitio (Figura 9) que revisaremos es Baires 
Turbo S.A., dedicado a la venta de turbos para auto- 
motores (http://www.bairesturbo.com.ar). 


BAIRESTURBOs, 


CAUBAA Y LUDEBAPDO, MAGIRO COMAPROMIS 





A primera vista, observamos que tiene opciones de 
lenguaje (castellano/inglés) colocadas en el enca- 
bezado, algo muy usado. La barra de navegación 
horizontal es, claramente, un elemento gráfico in- 
sertado, quizás, hecho en Fireworks o Photoshop. 
Banners a la derecha, como InterWeb. Entre el 
encabezado y el contenido podemos ver algo inte- 
resante: un reloj en tiempo real con fecha, posible- 
mente programado en JavaScript. Exploraremos 
más a fondo su estructura HTML (Figura 10). 


i a 
i Y 


institucional | Servicios | Productos y Aplicaciones Media Room Galeria Búsquedas Laborales | Contacto 


F 


X 


IMSTITUCIOMAL- 


Mar 4 Ago 09 = 13:74:95 | Horario de trabajo » Lunes a Viernes de 08 00 a 17 30 ha y de 1130 a 18 00 Pa 


FIGURA 9. 
Otro sitio clásico 
con encabezado, 


CARTA DFL PRESIDENTE 


Mi nombre es Hugo Danlel Ponte y en mi carácter de 
Presidente de Balres Turbo S.A. les doy la bienvenida 
a nuestra pagina, en la cual a partir de ahora Uds. 


| estarán siempre acompañados por un equipo de 


contenido y pie de página. 
De hecho, parece ser 

una estructura de diseño 
bastante parecida 

a la nuestra. 
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personas que privlegta las necesidades del chente y 
brenda un servnoo de excelencia en la reparación y 
venta de turboalmentadores. Una ampha cobertura 
naconal e mtemacone de logística le permitirá 
estrudurar un plan de mantenmmwento y eventual 
reparación programma de Sur unidades 


ES  turbonáémentadas. 


Poseemos una modema concepción sobre la reparación, venta y asesoramiento 
post-venta de turboalimentadores basada en la calidad y la certificación de las 
normas 150 2001-2000. También es importante remarcar que, la solidez de 
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IA Baires Turbo $ A. htm “EE 





caj Código | ana e tido: Bares Turbo S.A 


Pu tn 


Y 
L S 
kisdaikilisasliriatsrrilasiilisaakitislasiilissstirisssbislassikirsabiriadasbitea 


Abd aaka aa taana iT itanna 1MAMALA Å y å à y y A dla 
PAIRES TURDO N D Íj E 


institucional | Servicios | Producios y Aplicaciones | Media Room | Galería | Búsquedas Laborales Í Contacto 


Quiénes somos YOrgacigrama 


| Morarto de trabajo + Lunes a Viernes de 0 00 » 11.30 Im. y de 11.30 a 11 06 ha 


CARTA DEL PRESIDENTE 


P ba nombre es Hugo Daniel Ponte y en mi carácter de 
> Presidente de Baires Turbo S.A. les doy la bienvenióx 
a nuestra pagina, en la cual a partir de ahora Uds: 
t estarán siempre acompañados por un equipo de 
$ personas que priilegia las necesidades del diente y: 
: banda un sermoo de excelencia en la reparación y 
ÉS: venta de turboalimentadores. Una amplia cobertwra 
E o naconal € imtermaconal de logistica le permitirá 
> estructurar un plan de mantenimiento y eventual 
"separación programada de sus unidades 
 turboalmentadas. 


Poseemos una moderna concepción sobre la reparación, venta y asesoramiento 
post-venta de turboalimentadores basada en la calidad y la certicación de Las 


mermas 100% COMO Tambtuán as immnrianta ramarrar 


Estamos frente a un diseño de tabla principal ali- 
neada al centro, con una medida de 800 pixeles de 
ancho y hasta tres niveles de tablas secundarias. Si 
las revisamos con detenimiento, podemos observar 
que todas ellas tienen un ancho de 100% (se ve en 
la barra de Propiedades). Hay una cierta cantidad 
de texto en HTML, pero también hay varios elementos 
gráficos insertados, muchos de ellos con vínculos. 


Incluso podemos apreciar, en el encabezado y en el 
pie de página, un círculo y un rectángulo celestes, res- 
pectivamente, lo que nos marca un mapa de ima- 
gen, algo que veremos en el Capítulo 6. Con estos 


HOJAS DE ESTILO INTERNAS 


ma la ansias ra 





NO IMSTITUCIONAN- 


ma 

FIGURA 10. 

Vemos, en efecto, una 
estructura de tablas 
prácticamente idéntica 
a la nuestra, aunque 
hay más cantidad 

de secundarias que 

en el caso de InterWeb. 


diseños, ya tenemos una idea de cómo se estructuran 
otros sitios web. Pudimos observar que, mientras no se 
trate de una estructura dinámica (ASP o PHP), las pá- 
ginas HTML que dan vueltas en Internet están, en su 
gran mayoría, basadas en tablas. 


CREACIÓN DE HOJAS DE ESTILO 

Y PLANTILLAS 

Es hora de crear una hoja de estilos y una plantilla 
para nuestra página. Es bueno aclarar que podría- 
mos hacer nuestro sitio sin necesidad de cualquiera 
de los dos elementos mencionados, pero por cues- 
tiones prácticas y de orden los utilizaremos. 





Si en algún sitio web que diseñemos nos olvidamos de crear una hoja de estilos externa, o 
simplemente no queremos hacerlo, Dreamweaver la construirá automáticamente. El proble- 
ma es que lo hará página por página, de acuerdo con el estilo tipográfico. 
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Hoja de estilos 

Comenzaremos con nuestra hoja de estilos, que se- 
rá externa. Como ya vimos en el Capítulo 1, éstas 
son más prácticas que las internas porque podemos 
vincularlas con la cantidad de archivos HTML que 
deseemos. Esto significa que, si modificamos un es- 
tilo en la hoja, éste cambiará en todos los documen- 
tos que tengamos. Por ahora, solo la crearemos 
con dos y más adelante le agregaremos otros. 


Antes de comenzar, cabe aclarar que guardaremos 
un archivo separado con extensión CSS dentro de la 
carpeta principal, junto con nuestro index.html. 
La parte del menú principal que usaremos será 
Texto/Estilos CSS. La primera vez que realicemos 
una nueva hoja de estilos Dreamweaver, tendre- 
mos que hacer dos cosas: crear el nuevo archivo y 
definir su primer estilo (Paso a paso 11). 





UTILIDAD DE LAS HOJAS DE ESTILO 


Recordemos que una hoja de estilos externa puede 
contener infinita cantidad de estilos. Para llevar a cabo 
la siguiente práctica es imprescindible que tengamos 
abierto el archivo index.html en Dreamweaver. 


Lo primero que observaremos será que aparece un 
pequeño asterisco en la lengúeta de index.html, lo 
que indica que el archivo ha sufrido cambios y que 
aún no ha sido guardado. Además, aparece otra len- 
gueta al lado, que indica que tenemos otro archivo 
abierto. Veremos que se llama estilos.css (nues- 
tra hoja de estilos) y también tiene un asterisco al 
lado. Antes de continuar, debemos guardar ambos: 
lo más fácil es oprimir CTRL+S en cada uno. Hay 
que recordar que tenemos que efectuar este pro- 
cedimiento con la hoja de estilos cada vez que le 
agreguemos uno nuevo, justamente lo que hare- 
mos en el Paso a paso 12. 


Antes de comenzar, 
cabe aclarar que 
guardaremos un archivo 
separado con extensión 
CSS dentro de 

la carpeta principal 






Si bien nosotros usamos las hojas de estilo, esencialmente, para controlar los textos de 


nuestro sitio, podemos utilizarlas para mucho más, como para colocar fondos de color pleno 


exclusivamente a un área de la página, sin la necesidad de emplear tablas o celdas. 
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Creación y definición de CSS 


Formularios Ctrl+Alt+- 
S y Anular sangría Ctrl+Alt+ñ 
Formato de párrafo 
Alinear 
Lista 
Fuente 
Estilo 
Estilos CSS Y Ninguno 


Tamaño 





Nuevo... 


Cambio o Adjuntar hoja de estilos... 


Color... A O : 
Convertir CSS en línea en regla... 


Ortografía Mayús+F7 Mover reglas CSS... 


Tiempo de diseño... 





Vaya a la opción Texto/Estilos CSS del menú principal y seleccione Nuevo. 


Tipo de selector: (0) Clase (puede aplicarse a cualquier etiqueta) 


(O) Etiqueta (define de nuevo el aspecto de una etiqueta específica) 
(O) Avanzadas (ID, selectores contextuales, etc.) 


Nombre: titulo v 


Definir en: (9) | (Nuevo archivo de hoja de estilos) v 


(5 Sólo este documento 





Se abrirá la ventana (Nueva regla CSS). Allí, seleccione Clase en Tipo de 
selector, y escriba titulo (sin tilde y en minúsculas) en Nombre. En Definir en, 
asegúrese de que esté seleccionado (Nuevo archivo de hoja de estilos). 
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W Guardar archivo de hoja de estilos como 


Seleccionar nombre (9) Sistema de archivos Raíz del sitio 


Fuentes de datos 


Sitios y servidores... | 





Guardaren: — |. InterWeb 


Nombre Fecha mod... Tipo 


Ly descargas 


i Originales 


Nombre: estilos| 


w 


Tamaño 


D img 


9 0 em 


Etiquetas 


Guardar 


Tipo: Archivos de hojas de estilos (".css) z 








Oprima Aceptar. Aparecerá una ventana para que pueda guardar el nuevo archivo 
de hoja de estilos. Verifique que esté posicionado en la carpeta principal del sitio de 
InterWeb. En la opción Nombre, escriba estilos (todo en minúscula). 


Definición de regla para titulo en estilos.css 


Categoria Tipo 





Fondo 
Bloque 
Cuadro 
Lista 


Extensiones 





Fuente: 
Borde Tamaño: 
Posición Estilo: 


Alto de línea: 





Decoración: 























v [pix 
+ 


v |pix 


_Isubrayado 


sobreimpresión 


FP] tachar 


parpadeo 


ninguna 





Grosor: 
Variante: 


Case: 


Color: E 


Presione Guardar. Aparecerá la ventana de definición de estilos y podrá ver que 
en su barra azul ya se encuentra el nombre del primer estilo que nombró con un punto 
adelante (. titulo). Concéntrese solo en la categoría Tipo, y Únicamente 


en las opciones Fuente, Tamaño, Grosor, Estilo, Color y Decoración. 
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Definición de regla para titulo en estilos.css 


Categoría Tipo 





Tamaño: 6 


Estilo: normal y 
Extensiones 
Alto de línea: Y |pix 


Decoración: [T] subrayado 





E] sobreimpresión 
tachar 








l | parpadeo 


|V| ninguna 














Fuente: Verdana, Arial, Helvetica, sans-serif 


~ [e] 


Grosor: negrita 
Variante: 
Case: 


Color: P #000000 





En Fuente, seleccione Verdana, Arial, Helvetica, sans-serif; en Tamaño, 


16; en Grosor, negrita; en Estilo, normal; en Color, elija negro pleno 


(+000000) y en Decoración, marque ninguna. Luego, oprima Aceptar. 


Volveremos a ver que aparece el asterisco en la 
lengúeta correspondiente al archivo estilos.css. 
Esto ocurre porque lo acabamos de modificar al 
agregarle un nuevo estilo, por lo que tenemos que 
guardarlo nuevamente. Una vez que lo hayamos 
hecho, podemos cerrarlo porque, por ahora, no lo 
usaremos. Es tiempo de pasar a la plantilla. 


UTILIDAD DE LAS PLANTILLAS 


Plantilla 

Crear una plantilla nos servirá para simplificar el 
trabajo de actualización de los documentos 
HTML, ya que podremos programar ciertos secto- 
res para que permanezcan intactos. Al hacer una 
plantilla, Dreamweaver realiza, automáticamente, 
una carpeta llamada Templates, donde la guarda. 





Las plantillas se convierten en elementos sumamente útiles, sobre todo en sitios donde 
muchas personas [programadores o diseñadores] trabajan. En éstos, casi siempre, hay un 
administrador general, que crea las plantillas para mantener un control sobre los elementos. 
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Definición de un nuevo estilo 


Sangría Ctrl+ Alt+- 
Anular sangría Ctri+Alt+ñ 
Formato de párrafo 

Alinear 

Lista 


Fuente 

Estilo 

Estilos CSS 
Tamaño 

Cambio de tamaño 


Color... 


Ortografía Mayús+F7 


ES lo | p? [FL Comprobar página 
500 4 550 i 600 L 650 i 70 


Y Ninguno 
titulo 





Nuevo... 

Adjuntar hoja de estilos... 
Convertir CSS en línea en regla... 
Mover reglas CSS... 


Tiempo de diseño... 





Vaya a la opción Texto/Estilos CSS del menú principal y seleccione Nuevo. 


Tipo de selector: (0) Clase (puede aplicarse a cualquier etiqueta) 


© Etiqueta (define de nuevo el aspecto de una etiqueta especifica) 
(5) Avanzadas (ID, selectores contextuales, etc.) 


Nombre: | piel 


E 


Definir en: O) 


(5 Sólo este documento 





Se abrirá la ventana para definición de hojas de estilo (Nueva regla CSS). 


Allí, seleccione Clase en Tipo de selector, y escriba pie (en minúsculas) 


en Nombre. En Definir en, procure que esté seleccionado estilos.css. 
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Definición de regla para .pie en estilos.css 


Categoría 


Fondo 
Bloque 
Cuadro 
Borde 

Lista 
Posición 
Extensiones 


Tipo 





Fuente: 


Tamaño: 





Estilo: 


Alto de línea: 


Decoración: 


v |pix 


_|subrayado 


Grosor: 


Variante: 


Case: 


Color: El T 


sobreimpresión 
Pl tachar 
parpadeo 
ninguna 




















Oprima Aceptar. Aparecerá la ventana de definición de estilos y verá que, en su barra 
azul, ya aparece el nombre del segundo estilo que nombró con un punto adelante (. pie). 
Concéntrese en la categoría Tipo y en las mismas opciones que en la práctica anterior. 


Definición de regla para .pie en estilos.css 


Categoría Tipo 
Fondo 
Bloque 


Cuadro O aR 
Borde Tamaño: 9 v Grosor: negrita 

Lista — — 
Posición Estilo: cursiva v Variante: 

Extensiones 








Fuente: Arial, Helvetica, sans-serif 


Alto de línea: ” pix Case: 

Decoración: || | subrayado Color: P| #000000 
sobreimpresión 

_|tachar 





l| parpadeo 
Y| ninguna 

















En Fuente, seleccione Arial, Helvetica, sans-serif; en Tamaño, 9; 
en Grosor, negrita; en Estilo, cursiva; en Color, elija negro pleno (4000000) 
y en Decoración, marque ninguna. Cuando haya terminado, oprima Aceptar. 
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No debemos modificarla (renombrarla, moverla, 
etcétera). Nosotros la construiremos sobre la base 
de nuestro archivo index.html, por lo que debe- 
remos tenerlo abierto. Usaremos, dentro de la lengúe- 
ta Común de la barra de herramientas horizontal, 
el segundo icono comenzando desde la derecha 
(Figura 11 y Paso a paso 13). 


Ya tenemos la estructura 
base de InterWeb lista 

y hemos profundizado 

en el uso 

de Dreamweaver 


Hemos creado una plantilla con una región editable. 
La usaremos, de nuevo, en el Capítulo 6, donde le 
haremos algunos cambios. Venimos muy bien. Ya tene- 
mos la estructura base de InterWeb lista y hemos pro- 
fundizado en el uso de Dreamweaver. A continuación, 
trabajaremos con imágenes más complejas en 
Fireworks y luego volveremos para los toques finales. 


3 - [CA Userst elsa Desktop Users Inter Weblindex.html (XHTML)] 


sertar 


Modificar Texto Comandos sitio Ventana 


Ayuda 


seño | Formularios | Datos | Spry | Texto | Favoritos 


2-4- EDR- o- |E 


JE 


| Plantillas: Crear plantilla | 





La] Diseño | Título: [InterWeb 


FIGURA 11. 

El icono de Plantillas 
tiene varias opciones, 
algunas de ellas 


no las usaremos. 


TEMPLATE MONSTER 





— MO |CERa 






En la web de Template monster, ubicada en www.templatemonster.com, podemos encon- 
trar plantillas, tanto pagas como gratuitas, para que utilicemos en nuestro sitio. Además de 


HTML, incluye opciones en Flash, PHP, Magento, XML, entre otras alternativas. 
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Creación de una plantilla 





En la barra de herramientas horizontal, despliegue la pequeña flecha negra del icono 





de Plantillas y elija Crear plantilla. 


“Guardar como plantilla a] 


Sitio: | InterWeb ” 
Plantillas existentes: | (sin plantillas) 





Descripción: 


Guardar como: | plantilla] 





En la ventana Guardar como plantilla, en la opción Guardar como, 
escriba plantilla (todo en minúscula) y oprima Guardar. Aparecerá una ventana 
que le preguntará si desea actualizar los vínculos. Presione Sí. 


debe Decormmwesrrer 023 > [<<Plartillas> platillo det CXHITRAL"] 
facha Edsción er insertas Modéicar Texto Combia Hi0 Ventana Finale 


De insertar Común seña | Formularios | ES o 


pia E-4- 1450 --+-|B- 




















E, la | po FS Comprobar págna 
æ Fā E ÙG a E 2 
A A A A A A 





El nombre del archivo cambiará por plantilla.dwt (podrá observarlo en la lengúeta). 
Esto le permitirá crear regiones editables en la plantilla. 
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D netar Común Bt omic T omot] Spr | Teto | Parter 


DEE 4-1DQr->-B-2 








Seleccione la segunda tabla secundaria que creó (segunda fila de la columna 


central de la primera tabla secundaria). 


debe Deemienver €53 -[<<Plamtilla»> plantilla dv XHTML 


se insertar Común rr 
16041400 50-4-145027-2 0-2 

pm — E Crear plarnilla 

| pardillo cor" Y De ARAS 
| [sa] cóógo | Jomar [Jean] rindo: [interiveb : 

a[i m o ~am (7) Región opcional 
OE AE, E, PA [Z] Región repetida 


r. Reruón opresnal edñable 
5 Tabla de repetición 





Vuelva a desplegar el menú Plantillas de la barra de herramientas horizontal 


y seleccione Región editable. 
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En la opción Nombre de la ventana Nueva región editable, escriba contenido 
(todo en minúscula). Oprima Aceptar. 








Verá que aparece un borde que recubre la tabla que seleccionó y, en el extremo 
superior izquierdo, podrá observar un pequeño cartel verde que tiene el nombre que 
le colocó a la región editable. Ahora, guarde el documento con CTRL+S. 


RESUMEN 


En este quinto capítulo, hemos creado la estructura de tablas para contener nuestro diseño 
en Dreamweaver. Aprendimos a insertarlas y manejar sus propiedades. También hemos visto 
pautas muy útiles para adaptar a HTML, lo que realizamos en Fireworks. 
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Multiple choice 


p 1 ¿El espacio entero y el medio espacio 
sirven para imágenes y otros elementos? 
a- Solo el espacio entero. 

b- Solo el medio espacio. 

c- Sí, ambos. 

d- No, ninguno de los dos espacios sirve. 


»2 ¿En qué unidad se mide 
el espacio entre celdas? 

a- Centímetros. 

b- Picas. 

c- Milímetros. 

d- Pixeles. 


»3 ¿En qué unidad se mide 
el relleno de celdas? 

a- Centímetros. 

b- Picas. 

c- Milímetros. 

d- Pixeles. 


> 4 ¿Con qué combinación de teclas 
se activa el espacio entero? 

a- SHIFT 

b- ENTER 

c- SHIFT+ENTER 

d- Ninguna de las anteriores. 


p 5 ¿Con qué combinación de teclas 
se activa el medio espacio? 

a- SHIFT 

b- ENTER 

c- SHIFT+ENTER 

d- Ninguna de las anteriores. 


p 6 ¿Desde qué barra se manejan el espacio 
entre celdas y el relleno de celdas? 

a- Propiedades. 

b- Características. 

c- Espacios. 

d- Ninguna de las anteriores. 


"2-9 9-6 Q-y 'P-€ 'P-2 -| :sexsandsay 
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Capítulo 6 


Elementos gráficos 
dinámicos e inserción de 
los archivos en el HTIVIL 





Diseñaremos y programaremos 
los elementos gráficos dinámicos. 
Además, insertaremos los archivos. 
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Elementos gráficos 
dinámicos 


En este capítulo, diseñaremos las imágenes diná- 
micas de nuestro sitio, que incluyen desde peque- 
ñas animaciones para los banners, hasta una barra 
de navegación dinámica con comportamientos. 
Todos estos nuevos elementos le darán a InterWeb 
un perfil más profesional en cuanto a diseño. 
También debemos aclarar que éste será el último 
capítulo en el que usaremos Fireworks, a excep- 
ción de algún retoque en particular, que necesite- 
mos hacer más adelante. 


CAPAS Y FOTOGRAMAS 

Hasta ahora, en todo lo que hemos hecho en 
Fireworks, no utilizamos capas ni fotogramas, 
pero para abordar los contenidos de este capítulo es 
fundamental adentrarnos en el tema. Estos dos ele- 
mentos, que forman parte de cualquier programa de 
edición de imágenes, adquieren un rol muy impor- 
tante a la hora de trabajar con imágenes más com- 
plejas, como animaciones y comportamientos. 


Antes de analizar en profundidad cada uno, 


nos conviene tener sus ventanas desplegadas en 
la barra de la derecha. 


AJUSTAR LIENZO 


erción de-los- archivos en 





Capas 

Como en la mayoría de los programas de edición de 
imágenes, Fireworks cuenta con capas para trabajar 
diferentes niveles de elementos. Si bien todavía no 
las hemos usado, conviene hacer una referencia 
al respecto y explicar algunos detalles. Lo primero 
por tener en cuenta es que no es necesario usar 
capas en Fireworks. Esto significa que podemos 
crear y editar imágenes con una sola capa. No obs- 
tante, conviene usarlas cuando estamos trabajando 
con muchos elementos, sobre todo para no confun- 
dirnmos y para mantener un cierto orden. En este 
sentido, es útil porque podemos agrupar, por ejem- 
plo, todos los textos en una capa, las imágenes 
en otra, el fondo en otra, etc. La ventana Capas se 
encuentra en la barra de ventanas lateral, a la dere- 
cha. En caso de que no esté visible, debemos ir a 
Ventana/Capas en el menú principal. 






La opción Ajustar lienzo de Fireworks puede resultarnos muy útil cuando trabajamos con 
imágenes que son más grandes o más chicas que el área de trabajo con la que contamos. 


La opción se encuentra en la barra de Propiedades o podemos activarla con CTRL+ALT+F. 
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Como en la mayoria 
de los programas de 
edición de imagenes, 
Fireworks cuenta 
con capas 


Las capas predeterminadas variarán de acuerdo a Si 
abrimos una imagen para editar o si creamos un 
documento nuevo. En el primer caso aparecerán 
tres capas: Capa de Web, Capa 1 y Fondo. En el 
segundo caso aparecerán dos capas: Capa de Web y 
Capa 1. Por ahora dejaremos de lado la Capa de 
Web, ya que la abordaremos un par de capítulos más 
adelante. Lo único que aclararemos es que no se 
puede borrar, aunque se quiera. 


Ya sabemos cómo crear, modificar y eliminar las ca- 
pas. Lo único que queda por decir es que no pode- 
mos trabajar directamente sobre el lienzo, siempre 
necesitamos tener una capa para insertar nuestros 
elementos en ella. Más allá de esto, las capas tienen 
una funcionalidad básica, que es ayudar a agrupar 
los diferentes componentes y darles, así, una jerar- 
quía de posicionamiento. 


Por el momento, hemos usado una sola, debido a 
que no trabajamos con animaciones ni con barras de 
navegación dinámicas. Tampoco tuvimos necesidad 
de agrupar o de jerarquizar elementos. En adelante, 
sí requeriremos más capas para un mayor orden de 
nuestros diseños. Cuando necesitemos, las emplea- 
remos y veremos algunas cosas más sobre ellas. Por 
ahora, pasemos a los fotogramas. 
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Fotogramas 

Podríamos denominar a los fotogramas instan- 
cias temporales. Básicamente, son diferentes 
lienzos de trabajo que coexisten en un mismo 
archivo, pero en tiempos distintos. Esto posibilita 
que cada uno pueda contener elementos diversos. 
Su principal utilidad es permitirnos crear anima- 
ciones y comportamientos en Fireworks. Los usare- 
mos tanto para los GIF animados como para la 
barra de navegación dinámica (Figura 1). 


Cada vez que abrimos un archivo de imagen o crea- 
mos un nuevo lienzo para trabajar, disponemos de 
un fotograma que aparece en la ventana correspon- 
diente. Hasta ahora, nunca agregamos otro porque 
no lo hemos necesitado (algo parecido a lo que nos 
pasó con las capas), pero eso va a cambiar. 


Hay una gran diferencia entre crear y duplicar un fo- 
tograma. En el primer caso, Fireworks insertará uno 
vacío en la ventana Fotogramas. De esta manera, 
nosotros podremos llenarlo con la cantidad de ele- 
mentos que deseemos. En el segundo caso, el pro- 
grama duplicará el último existente. 


H Alinear 


¥ Fotogramas 


| 





FIGURA 1. Podemos controlar el tiempo 

de duración de cada fotograma en centésimas 
de segundo. Esto nos permite, por ejemplo, 
un mayor manejo de un GIF animado. 
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Así, tendremos dos con el mismo contenido, lo que 
es muy útil para desarrollar un proceso de animación 
en el caso que se trate de un GIF animado. 


En las siguientes secciones del capítulo pondremos 
en práctica el uso de las capas y de los fotogra- 
mas. Lo que siempre conviene recordar es, ante 
cualquier error, recurrir a CTRL+Z para volver atrás los 
cambios que nos hayan salido mal o los no deseados. 


BANNERS 

En total, diseñaremos tres banners para el sitio 
de InterWeb. Comenzaremos por el más simple, don- 
de solo usaremos texto. Antes de empezar, es impor- 
tante que tengamos visible la ventana Fotogramas 
en la barra lateral. Además, es recomendable tener 
presente la medida de la celda donde insertaremos 


FIGURA 2. 

Si nos fijamos bien, 
veremos que, 
aproximadamente, 
contamos con un ancho 
de 200 pixeles para 
insertar nuestro banner. 
Conviene que su altura 


no supere los 150. 


ARRASTRAR FOTOGRAMAS 


erción de-los- archivos en el 


> 








Hay una gran diferencia 
entre crear y duplicar 
un fotograma. En el 
primer caso, Fireworks 
insertará uno vacío en 
la ventana Fotogramas 


los banners, para poder programar correctamente el 
área de trabajo en Fireworks (Figura 2). Esto lo hace- 
mos con las reglas de Dreamweaver (Paso a paso 1). 
Ya tenemos nuestro primer GIF animado para el sitio 
de InterWeb. Si bien cuenta únicamente con dos foto- 
gramas, cumple con su objetivo: tener una pequeña 
animación que capte la atención de los usuarios. 


q E. A | po A Comprobar página | 


Presione Control y haga clic para seleccionar celdas 
—__ == 









Si luego de terminar de trabajar en un archivo eMe ls 
que queremos cambiar su orden de aparición, por ejemplo, lo que tenemos que hacer es 


ICRA ERAO EEEE ETOR EELT E 
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Creación de un banner en Fireworks 


Nuevo documento 


Tamaño del lienzo: 117, 2K 


puras 20 hm: 2o 


Resolución: 72 Pixeles/pulgada hal 


Color del lienzo 
(0) Blanco 
(5 Transparente 


(5) Personalizado; 


LA 





Abra Fireworks y, en Archivo /Nuevo, programe un lienzo de 200 pixeles de ancho 
por 150 de alto. La resolución será de 72 puntos por pulgada. El color de fondo 
será blanco pleno (+FFFFFF). 


Publicidad. pno* 
J Orginali | Evista preria C]? copias Ea copias 


Publicite 
aquí 





Con la Herramienta Texto, escriba en el centro del lienzo la frase Publicite aquí. 
En el ejemplo se usa tipografía Calibri, tamaño 36, negrita, color negro pleno 
(4000000). Cualquier tipografía sin serif de palo seco puede funcionar bien. 
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5n delos archivos en el HTM 
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> Alinear 


Añadir fotogramas... 


Duplicar fotograma... 


Eliminar fotograma 


Copiar en fotogramas... 


Distribuir en fotogramas 


Recorte automático 


Diferencia automática 
Propiedades... 


Ayuda 
Agrupar Fotogramas con 


Cambiar nombre del grupo de paneles... 








Cerrar grupo de paneles 


En la ventana Fotogramas de la barra lateral, entre al menú Opciones. 
Allí, elija Duplicar fotograma. 


| Duplicar fotograma 


Múmero: [+ 


Insertar nuevos fotogramas 


5 Al principio 


(5) Antes del fotograma actual 


(0) Después del fotograma actual 
(5 Al final 


En la ventana Duplicar fotograma, seleccione 1 en la opción Número 
y Después del fotograma actual en Insertar nuevos fotogramas. 
Una vez hecho esto, presione Aceptar. 
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a -E x 
Publicite 
F 
aqui 
Higuera 
Danes 
Ajte ola 
Euel y hebreo 
Desendocár 
¡Lao 
Pel iba 
Fado 
= => A HEM E duma 
=|=» [BM Nicsak 
HI m pie > ENEE m: 
Jee h AZ ee 
f=] =m ú [a +, jui to 


Mode ulom de Photoshop 





En la ventana Fotogramas, aparecerá un nuevo fotograma. Asegúrese de seleccionarlo 
y seleccione, también, el texto en el lienzo de trabajo. En el menú Filtros de la barra 
de Propiedades elija, en Sombrear e iluminar, Iluminado. 


o Y 
o B 


Colores 


A À, 
P Z) 
em 
nu» 


mf] 
=- = Y Propirdades 


ga Texto Colibri 
== 


Publicite aqu [Ay 0 [wi Y 100 (9...) G mta? 


= eer Anchura 1 
mi:z Eo -| `E o SA $1 
LJ E E D a 





Ni mw fiw A oneto 


En las propiedades del efecto, a las que puede acceder con un doble clic sobre 
éste en el menú Filtros, seleccione color azul pleno (#0000FF) para 
el iluminado y escriba 2 en Anchura. 
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alle |e 


* Alinear 


AI Y 


Demora de fotogramas: 
į 100 segundos 


Induir al exportar 


Haga clic izquierdo en cualquier parte del área gris que rodea al lienzo, para aceptar los 
cambios del menú Filtros. En la ventana Fotogramas, haga doble clic en la opción 
Demora de fotogramas del Fotograma 1. Allí, introduzca 150 como valor. 





Haga lo mismo en la opción Demora de fotogramas del Fotograma 2. 
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and Guardar como 


Guarjaren: — |: Orgrudas -~ 03:10 


B- Fecha dec... Etiquetat Tamaño Claficación 
a MM Banner 1 Mare 
Sitiossecientes US Encsbezedo R Fondo Muestra 
M Fotos Líneas 
MN Pie de página M Publicidad 








Vaya a Archivo/Guardar como y guarde el archivo en la carpeta Originales, 
con el nombre Publicidad. 


| Presentación preliminar de la imagen 





GIF Animado [Y] Vista previa | Configuraciones guardadas: 


A Adaptable 128 colores | [| MO 
+ 
Formato: GIF Animado 5.51K O seg. a 56kbps se 

Paleta: [Adaptable y) 


Pérdida: 0 [y] 128 y 











Tramar: | |- 124 
e 





jajja] Eji 


R:000 V:000 A:000 Hex:000000 índice: 123Seguro para 
la Web 








Ahora, diríjase a Archivo/Presentación preliminar de la imagen. 
Allí, elija GIF Animado en la opción Formato, de la lengúeta Opciones. 
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uy Exportar 


Guardar en: 


E 
y 


Sitios recientes 


Escritorio 






ión de-los archivos enel HTM 





L gf 


Nombre Fecha mod... 
4 _notes 

FA banner2 

FA fondo-muestra 

PA piepagina 


-~ O emp 
Tamaño 

FA bannerl 

PA encabezado 

PA lineas 

FA publicidadanim 


Exportar. 





Haga clic en Exportar y guarde el archivo en la subcarpeta gif, dentro de la carpeta 


img, con el nombre publicidadanin. 


Con un procedimiento similar al anterior, debemos 
crear dos GIF animados más. Ahora realizaremos es- 
ta actividad. Tendrán más fotogramas, incluiremos 
tanto imágenes como texto y serán sobre produc- 
tos y servicios que ofrece InterWeb. Las primeras 
las bajaremos de Internet y deberán ser sobre 


© 


PROPIEDADES DE ANIMACIÓN DEL GIF ANIMADO 


computadoras, dispositivos de almacenamiento 
(CD, DVD, entre otras cosas) y periféricos (teclado, 
mouse, etcétera). Con unas cuatro será suficiente. 
Es importante que su tamaño no sea mayor que 
el área de trabajo que usaremos para los banners: 
200 pixeles de ancho por 150 de alto. 





En la ventana Presentación preliminar de la imagen, en la lengüeta Animación, podemos 


acceder a propiedades adicionales del GIF animado, por ejemplo, Repeticiones, que nos per- 


mite controlar la cantidad de veces que se repite la animación. 
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BARRAS DE NAVEGACIÓN 
DINÁMICAS 

Las barras de navegación dinámicas son menús de 
vínculos, que llevan al usuario a un nuevo destino y, 
además, efectúan un comportamiento (generalmente, 
un tipo de animación) en el proceso. 


Es un componente puramente característico de 
Fireworks debido a que ningún otro programa 
tiene dicha funcionalidad. También es el más com- 
plejo porque, para que los comportamientos pue- 
dan funcionar, se inserta automáticamente un 
código JavaScript avanzado. 


Cuando diseñemos y programemos la barra de 
navegación dinámica de InterWeb, usaremos la 
mayoría de las herramientas de Fireworks que 
vimos. Será una de las prácticas más completas y 


GABRIEL ¿ARI - Oo Mili pará la da Hi 


MES 2 Code | A po Tilo; CADAIL ZAHGTTE - Sloan Hi D. 


n E 
LEER HOOT vLlstepisple aLlnteros 1liabk=bluée BplelesopifIiFf ieTrHargis 
aa ll 5 
TE u- 
14] 








PALETA DE GIF ANIMADO 





extensas del programa. Esto, además, significa 
que será compleja, ya que llevará muchos elemen- 
tos que interactuarán entre sí. 


Comportamientos JavaScript 

El comportamiento JavaScript es un tipo de lengua- 

je de programación sin compilación, que se usa 

junto con el código HTML para crear interfaces gráfi- 
cas más dinámicas y amigables. Antes de proseguir, 
debemos ahondar en ciertos términos importantes: 

e Lenguaje de etiquetas. Es uno de los tipos 
de lenguaje de programación más sencillo, Esto 
se debe a que todas las instrucciones que imparte y 
los términos que maneja son perfectamente com- 
prensibles para cualquier persona, por más que 
no domine Informática. El ejemplo más inmediato 
es HTML. Si observamos su código fuente, enten- 
deremos la mayoría de la terminología (Figura 3). 


FIGURA 3. 

Si bien los términos 

están en inglés, podemos 
reconocer etiquetas 

como <body> [cuerpo del 
documento) o <table> 
(tabla). Éstas hacen 
referencia a componentes 
de una página. 





Es muy importante no tocar la configuración de la paleta del GIF animado en la ventana 
Presentación preliminar de la imagen, ya que si la reemplazamos por cualquier otra de 
formato GIF, nuestra animación se convertirá en una imagen estática. 
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e Lenguaje de programación sin compilación. son inteligibles para una persona que no domina 


Es un lenguaje intermedio. Sus términos e instruc- 
ciones no son inteligibles para una persona que 
no domina cierto nivel de sintaxis de programa- 
ción. El ejemplo más inmediato es JavaScript. 
El código puede ir insertado directamente dentro 
de otro lenguaje, como es el caso de una página 


un alto nivel de sintaxis de programación. El ejem- 
plo más inmediato es Java, y también podemos 
mencionar C y Basic. El código debe ser compilado 
antes de poder funcionar. A este tipo de progra- 
mación se lo conoce en el ambiente como 
"programación dura” (Figura 5). 


web programada en HTML. Al ser más complejo, 
permite programar más funcionalidades (Figura 4). Fireworks cuenta con la funcionalidad de generar 
código JavaScript, para permitir que los elementos 
gráficos que diseñemos puedan interactuar con el 
usuario, es decir, que se animen cuando éste ejecu- 
te una determinada acción. Para que un elemento 
que coloquemos en nuestro lienzo pueda aceptar 


o tener un comportamiento, debe agregársele un 


e Lenguaje de programación con compilación. 
Es un lenguaje muy complejo, que se utiliza 
para programar software avanzado, como 
sistemas operativos (Windows) y de aplicación 
(Dreamweaver). Sus términos e instrucciones no 


<SCRIPT type=text/javascript> 


function MM swaplmgRestore () ( Ya 
var i,x,a=document.MM sr; for(i=0;assi<a.lengthes (x=a [(1]) 22x.oSrc;i4+4+) x.Src=x.0Src; 
} 
function MM preloadImages () ( 3.0 
var d=document; if(d.images)[ if(!d.MM p) d.MM p=new 2Array(); 
var i,j=d.M p.length, a=MM preloadImages.arguments; for(i=0; i<a.length; i++) 
if (a[(i].index0f ("4") !=0)[ d.M p[j]=new Image; d.MM p[j++].src=a[i];)) 
} 


function MM findObj (n, d) { 4.01 
var p,i,x; if(!d) d=document; if ((p=n.index0f (”2"))>0ssparent.frames.length) ( 
d=parent.frames [n.substring (p+1) ] .document; n=n.substring(0,p);) 
if (! (x=4[n]) <<d.al1) x=d.all[n]; for (i=0;!'xssi<d.forms.length;i++) x=d.forms(i] [n]; 
for (i=0;!'xs4d.layersssi<d.layers.length;i++) x=MM find0bj (n,d.layers[i].document) ; 
if (!x es d.getElementByld) x=d.getElementBylId(n); return x; 
} 


FIGURA 4. 
La sintaxis JavaScript 
debe ser muy precisa 


function MM swapImage({) { 
var i,j=0,x,a=MM_swapImage.arguments; document.MM _sr=new Array; for (i=0;i<(a.length-2);i+=3) 
if ((x=MM_findObj (a[i])) !=null}) {document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=aā[i+2];} 


ya que, a diferencia E 
del HTML, no admite | i 


function MM openBrWindow (theURL, winName, features) { 
window.open (theURL,winName, features); 


ni perdona errores 





de redacción. 






PESO DE UN GIF ANIMADO 


Si bien comentamos que una de las características por las que aún se emplean los GIF 
animados es su poco peso, tenemos que ser conscientes de que, mientras más fotogra- 


mas compongan uno, más pesado será. 
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A A CA O CAS RRA CAROS TOOL 


C-=5,0+=5 


1 


Tine(c, xyC8), d, xy(8)); line(c, xyC51), d, xy (513); 
bar (0, xy(9), a, xy(50));bar Cb, xy(9), getmaxx(), xy(50)); 
35; delay(10); 


, sound(10*(a+250 


nosound); 


char passeri] =10xfe, Oxbc, Oxda, 0xe4, 0xe2, 0xcû, 0x88, 0x00}; 


setfillpatternípattern,1); 

bar (0, 0, 640,480); 

settextstyle(1,0,5); 

sertcolor(10); 

outtextxy(100,140, "INSTITUTE MANAGEMENT"); 
outtextxy(250,200, "SYSTEM">; 

getch); 

setcolor C0); 

T i 


rectangle(0+1,0,640-1,480); 
delay(5); 


área de división con la Herramienta División. 
Con ésta debemos dibujar un rectángulo o un 
polígono sobre el objeto en cuestión, que actuará 
como una capa que permitirá la inserción del 
JavaScript. Todo lo que dibujemos con esta herra- 
mienta se verá en la Capa de Web, en la ventana 





COMPILACIÓN 





FIGURA 5. 

Existen diferentes 
paradigmas 

de programación: 
programación estructural, 
modulada, orientada 

a objetos, declarativa, 
entre otros. 


Capas. Su característica principal es que existe 
en todos los fotogramas al mismo tiempo, sin im- 
portar la cantidad que tenga un archivo. A conti- 
nuación, realizaremos una pequeña práctica 
que incluirá la inserción de un comportamiento 
llamado Rollover simple. 


Fireworks cuenta 
con la funcionalidad 
de generar código 
JavaScript 


Compilar significa, básicamente, traducir. En Informática, cada vez que se compila un códi- 
go, se traduce un lenguaje humano a uno informático, para que una computadora lo entien- 
da. Este proceso demanda un programa que funciona como intermediario. 
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En un nuevo lienzo de trabajo de 200 por 200 pixe- 
les, escribimos, con la Herramienta Texto, un texto 
de prueba cualquiera, sin importar la tipografía ni el 
color. El tamaño debe adaptarse al área de trabajo. 


En la ventana Fotogramas de la barra lateral, entra- 
mos al menú Opciones. Allí, elegimos Duplicar 
fotograma. Seleccionamos 1 en la opción Número y 
Después del fotograma actual en Insertar 
nuevos fotogramas. Luego, presionamos Aceptar. 


Elegimos el Fotograma 2 en la ventana Fotogramas 
y, con la Herramienta Puntero, seleccionamos el 
texto en el área de trabajo. En el menú Filtros 
de la barra de Propiedades seleccionamos, en 
Sombrear e iluminar, Iluminado. 





MEDIO ESPACIO 


En las propiedades del efecto, elegimos el color 
que deseemos para el iluminado y las características 
que prefiramos. Seleccionamos la Herramienta 
División de la barra de herramientas vertical. Con 
ella, dibujamos un rectángulo sobre el texto. Nos ase- 
guramos de que cubra el efecto de iluminado. 


Seleccionamos la Herramienta Puntero y hacemos 
un clic izquierdo sobre el rectángulo que dibujamos. 
Abrimos la ventana Comportamientos en la barra 
lateral de ventanas. Si ésta no se encuentra 
allí, la activamos desde el menú principal Ventana/ 
Comportamientos. Hacemos clic izquierdo sobre el 
signo + (Añadir comportamiento) de la ventana. En 
la lista desplegada, elegimos Rollover simple. 


Seleccionamos la Herramienta Puntero y hacemos 
un clic izquierdo sobre el área gris que rodea al lienzo. 
Volvemos a Fireworks y, si lo deseamos, guardamos 
el archivo en la carpeta Originales. 


El Rollover simple es el 
tipo de comportamiento 
más sencillo 

que se puede usar 






Si consideramos que el espacio que se genera al oprimir Enter es demasiado, podemos pro- 


bar con CTRL+ENTER. Esta opción hace que el cursor se posicione en la línea inmediatamente 


inferior a la que estaba. Generalmente, no se usa para separar párrafos de texto. 
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Rollover simple 

El Rollover simple es el tipo de comportamiento 
más sencillo que se puede usar. En la práctica an- 
terior, lo vimos y también pudimos observar lo que 
hace. Esencialmente, muestra el contenido del 
Fotograma 2 cuando un usuario se posiciona 
encima del Fotograma 1. 


A pesar de que podemos colocarle la cantidad de fo- 
togramas que queramos, funcionará, únicamente, 
con los dos primeros. Lo que sí es muy importante es 
que el área de división cubra todo el efecto del 
elemento, por eso conviene que la dibujemos en 
el segundo fotograma, que es donde está, aunque 
puede ser dibujada en el primero. Si no se respeta 


Fiestas Internas 

Evento interno donde la institución presenta un 
nuevo espacio o sede, donde se comentan los 
pasos y logros que Hevaron a ese objetivo. Nuestro 
servicio de diseño y coordinación le asegura el édo 
para este evento. 


+ Mi. 


Fiestas Temáticas 


Congresos 


Inauguraciones 


Eventos a Beneficio 


Marketing y Estrategias de Comunicación 


Lanzamientos de Producto 


EFECTOS Y FILTROS VARIOS 


Lanzamiento de Prensa 





esto, el filtro aparecerá cortado, ya que solamente 
se intercambia de fotograma el área que marca la 
Herramienta División. Lo que queda fuera sigue 
siendo parte del primer fotograma. 


Intercambiar imagen 

El comportamiento Intercambiar imagen es un 
poco más complejo y puede funcionar con más de 
dos fotogramas, de hecho, con la cantidad que se 
desee. Básicamente, consiste en la aparición de un 
elemento cuando el usuario interactúa con el área 
de división. Lo interesante es que se puede progra- 
mar para que éste aparezca en cualquier otro lado, 
siempre que esté dentro de los límites del lienzo 
sobre el que trabajamos (Figura 6). 


Family Day 


Exposiciones 


FIGURA 6. 

TA Al desplazarnos sobre 
algunas de las categorías 
Conferencias que rodean la imagen 
en la sección Servicios 
ES del sitio Catalinas Eventos, 
aparece un texto 
explicativo 


en su parte superior. 





Si bien hasta ahora hemos empleado efectos de sombreado e iluminado, también podemos 
diseñar un GIF animado o barra de navegación dinámica con cambios de tipografía entre foto- 


gramas, con mayor o menor tamaño de la tipografía, y jugar con la rotación del elemento. 
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reión delos archivos en el HTM 
A AZ 


— 
——. 
> 








Con este comportamiento, generalmente, se trabaja 
con un área de división vacía en el primer fotogra- 
ma, que es donde a partir del segundo aparecerán el 
o los elementos cuando el usuario realice alguna 
acción. En este sentido, el área de división vacía 
va conectada con las otras. Esto se especifica en la 
programación del comportamiento, al igual que el 
número de fotograma con el que deberá intercambiar. 
En el Paso a paso 2, realizaremos una práctica 
para ejemplificarlo mejor. 


ÁREAS ACTIVAS Y VÍNCULOS 

Antes de crear la barra de navegación dinámica 
para el sitio de InterWeb, explicaremos las propieda- 
des de las áreas de división, que son las que nos 
permiten generar vínculos y se utilizan de la misma 
manera que en Dreamweaver (Guía Visual 1). 





NAVEGADOR SECUNDARIO 


Ahora, es tiempo de pasar a nuestra última y más 
extensa práctica de Fireworks: la creación de la ba- 
rra de navegación dinámica. Antes de comenzar, es 
muy importante ser conscientes del espacio del que 
disponemos en Dreamweaver para ésta. Por como 
hemos trabajado, sabemos que contamos con un 
área de 880 pixeles de ancho por 60 de alto, así que 
ése será el tamaño de nuestro lienzo de trabajo. 


En el Paso a Paso 3, integraremos la mayoría 
de las herramientas aprendidas a lo largo de los capí- 
tulos de Fireworks. Recomendamos un repaso previo 
general de todas, para que no surja ningún inconve- 
niente durante la práctica. De todas formas, siempre 
podemos recurrir al comando CTRL+Z. 


Las propiedades 

de las áreas de división 
son las que nos permiten 
generar vínculos 






En Fireworks, podemos configurar un navegador adicional de Internet, además del principal, 


para así ver cómo se visualiza nuestra barra de navegación en éste. La opción se encuentra 


en Archivo/Vista previa en el navegador/Establecer navegador secundario. 
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Intercambiar imagen 


‘Intercambio 
de 
imagen 


= 24 "MM Mes Bou [rua 





En un nuevo lienzo de trabajo de 200 por 200 pixeles, escriba con la Herramienta 
Texto un texto de prueba cualquiera en la parte superior. Asegúrese de dejar 
un espacio en el área inferior de la zona de trabajo. 


=- ĝi 

| Añadir fotogramas... 

Duplicar fetogi 

Eárminas Hetoqrama 
AAA 


Distribur en fotogramas 


Recorte Jubani 


ierenca alerta 


Intercambio Propiedades.. 
de 


x Ayda 
imagen 


Agrupa! Fobegramas <6n 


rrombre del seupo de paredes 


Cerrar grupo de paneles 





En la ventana Fotogramas de la barra lateral, entre al menú Opciones. 
Allí, elija Duplicar fotograma. Seleccione 1 en la opción Número y Después 
del fotograma actual en Insertar nuevos fotogramas. Presione Aceptar. 


Seleccione la Herramienta División en la barra de herramientas vertical 
y dibuje un rectángulo sobre el texto. Procure que lo cubra en su totalidad. 
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Intercambio 
de 
imagen 


| División: JPEG - 


g 








Dibuje otro rectángulo con la misma herramienta en la parte inferior del lienzo. 
Verifique que lo cubra todo o casi todo, para así aprovechar más el espacio. 








Intercambio 
de 
imagen 











Asegúrese de estar posicionado en el Fotograma 2. Con la Herramienta 
Rectángulo , dibuje una figura en el área de división inferior. Mientras contraste 
con el del lienzo, no importa su color. 


Con la Herramienta Puntero, seleccione el área de división superior y, en la ventana 
Comportamientos, despliegue el menú y elija Intercambiar imagen. 
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Intercambiar imagen 


Al desplazar el cursor sobre la división actual, intercambia una imagen en la 
división elegida debajo: 


00000001 r2 c2 
(olomo olei A 





Mostrar la imagen intercambiada de: 


© Fotograma n°: 
(5) Archivo de imagen: ES - | 





(V| Carga previa de imágenes 








Y | Restablecer la imagen onMouseOut 





Intercambia la imagen de la división especificada y muestra una imagen de un 
otograma diferente o de un archivo externo. 





En la ventana Intercambiar imagen, seleccione el área de división inferior y, 

en Mostrar la imagen intercambiada de, elija Fotograma 2. De esta manera, 
cuando el usuario se posicione sobre el texto, aparecerá en el área de división inferior 
la figura, ya que mostrará el contenido del Fotograma 2. Presione Aceptar. 


A 


Intercambio 
de 
imagen 





Si selecciona el área de división superior, verá que ha quedado unida a su par inferior. 
Oprima la tecla F12 para previsualizar el trabajo en el explorador de Internet 
predeterminado. Cuando se posicione con el cursor encima del texto, aparecerá la imagen. 


Vuelva a Fireworks y, si lo desea, guarde el archivo en la carpeta Originales. 
De lo contrario, ciérrelo y no guarde los cambios. 
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Propiedades de las área de divisón 


y Propiedades 


00000001 | aa apeg- po S 


An: 162 X: 20 Destino: O + 
Al: g3 Y7 





O Vínculo: en este lugar debemos escribir el vínculo con el que queremos que el área esté 
conectada. Puede ser interno, externo, un ancla, una descarga, o un e-mail. 

O Alt: aquí podemos escribir el texto alternativo de imagen. En caso de que el usuario se posicione 
con el mouse sobre la imagen, aparecerá el texto que hayamos escrito, con fondo amarillo. 

O Destino: es la locación donde se abre el vínculo. Si deseamos que se abra en una nueva 
ventana, deberemos seleccionar _blank. 


Barra de navegación dinámica 





Vaya a Archivo/Nuevo y cree un lienzo de 880 pixeles de ancho por 60 de alto. 
La resolución será de 72 puntos por pulgada. El color de fondo será gris (#999999). 


174 RedUSERS?: 


Elementos gráficos dinámicos 





as Ep 
(egna G eis pia [0] F = Dlhá rpa 
a q læ pra F P 
| z o -= = j= p= == = ~ ca yu = =æ = ma j= 
A A AAA AAA Lecce ie cm dd dd dd Gus bara rl dad A DA mA 


AAA A A L 





Despliegue la ventana Capas en la barra de ventanas lateral y, en Opciones, 
seleccione Nueva capa. 


En la ventana Nueva capa, oprima Aceptar. 
Si desea, le puede cambiar el nombre, pero no es necesario. 


| Æ Acs D i |x| 


[| Apure ato. 





Asegúrese de posicionarse en la Capa 1. Por el momento bloquee la Capa 2. 
Seleccione la Herramienta Texto y, antes de comenzar a escribir los nombres 

de las diferentes secciones del sitio, elija tipografía Arial, color negro pleno (+000000), 
tamaño 22, negrita, alineación Centrado, Ajuste entre caracteres 5. 
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bn bibuño-T prg" 


¿nr | ina peña Liria Eder 





Comience a escribir los nombres de las secciones que actuarán como vínculos. 
Deje un cierto espacio entre cada uno. 


Despliegue la ventana Alinear en la barra de ventanas lateral. Elija la opción 
Con el lienzo y luego todos los textos que escribió. En Alinear, haga clic sobre 
el quinto icono (Alinear centro vertical). 


TS 


Con el lienzo: 


B 


Alinear: 


Sal 


Distribuir: 


CA A A 
EE Œ 


rar horizontalmente de forma uniforme 


Ñ= lol Eaka l 
G i a == ae 


Ahora, vuelva a hacer clic sobre la opción Con el lienzo para desmarcarla. Haga clic sobre 
el segundo icono en Espacio (Separar horizontalmente de forma uniforme). 
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NT 


Añadir fotogramas... 
Duplicar fotograma... 
Eliminar fotograma 
Copiar en fotogramas... 
Distribuir en fotogramas 


Recorte automático 


Diferencia automática 
Propiedades... 


Ayuda 


Agrupar Fotogramas con 





Cambiar nombre del grupo de paneles... 


Cerrar grupo de paneles 





Con los textos alineados en el lienzo, vaya a la ventana Fotogramas y, en Opciones, 
elija Duplicar fotograma. Seleccione 1 en la opción Número y Después del 
fotograma actual en Insertar nuevos fotogramas. Presione Aceptar. 


Posicionado en el Fotograma 2, vuelva a la ventana Capas y seleccione todos 
los textos. Cámbieles el color a gris oscuro (4666666). En el menú Filtros de la barra de 
Propiedades elija, en Bisel y Relieve, Relieve hundido. Mantenga las propiedades. 


Ry ADA 3 


a 
E 


f 


T Y 


decani 
T 


A 
= Ol 
+ 





Nuevamente, en el menú Filtros, seleccione Sombrear e iluminar, Sombra. 
Cambie el color por blanco pleno (+HFFFFFF). 
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ca 


[Eliin [is [o ds 


Seleccione la Herramienta División y dibuje un área de división por cada palabra. 
Asegúrese de cubrir también el efecto. 


Seleccione todas las áreas de división (clic izquierdo + SHIFT) y, en la ventana 
Comportamientos, elija Rollover simple del menú desplegable. 


Demmin bime rma byi 


a L = a = o] | |= o = = = ta = = 
binidhkisiskhindiiliiiiladikbiiiikisiaiiikisiihkdikakinliakliiiilaiiskikbiiiaiikiniilisi 


ip 


| 
| 
|| 


40555151. "Mama 


' '- $- 
de a j h 
- . 


Pym ga 


a 
E 


"ari 
E E 
amia 


Gas 
Pa 


Ahora, procure estar posicionado en el Fotograma 2 y seleccione la Capa 2 

para trabajar. Si lo desea, para no confundirse, puede bloquear la Capa 1. 

Elija la Herramienta Texto y ubíquese justo a la derecha de La Empresa. 
Escriba € con tipografía Arial, tamaño 22, negrita, color blanco pleno (4FFFFFF). 
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Repita el procedimiento a la derecha de cada uno de los textos de la Capa 1. 

Con la Herramienta División, dibuje un rectángulo por cada arroba que escribió. 
Verifique que queden totalmente cubiertas y que los rectángulos no se superpongan 
con los de los textos. Seleccione el área de división que cubre La Empresa y, 

en la ventana Comportamientos, elija Intercambiar imagen. 


En la ventana Intercambiar imagen, seleccione el segundo rectángulo (contando de 
izquierda a derecha). En Mostrar la imagen intercambiada de, elija Fotograma 2. 
Seleccione el área de división de Diseño Web y repita el procedimiento, con la diferencia 
de que ahora seleccionará el cuarto rectángulo. Haga lo mismo con todas las otras áreas 
de división. Siempre seleccione el rectángulo que se encuentra a la derecha de ellas. 


lud > E Corea palta Local Temp N T emp iht 
Archivo Edeción We Favores Herramientas Ayuda 
A 





Pruebe la barra de navegación con F12. Luego, vuelva a Fireworks y guarde el archivo 


en la carpeta Originales, con el nombre Barra. 





FORMATOS DE IMAGEN PARA LA BARRA DE NAVEGACIÓN 





Una barra de navegación dinámica puede exportarse tanto con formato GIF como JPG. 
La decisión que tomaremos vendrá dada por sus características de diseño. Si se trata 
de un archivo con varios colores o patrones, usaremos JPG. 
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Insertar elementos 
gráficos en HTML 


Ha llegado la hora de comenzar a insertar todas las 
imágenes que trabajamos a lo largo de los últimos 
cuatro capítulos, en Dreamweaver. Notaremos 
que, a medida que lo hacemos, quizá necesite- 
mos corregir algunas propiedades de las tablas, 
como el Relleno de celda y el Espacio entre 
celdas, entre otras. Empezaremos por el encabe- 
zado, que lo tenemos guardado en la subcarpeta 
gif, dentro de la carpeta img de nuestro sitio. En 
esta sección conviene que tengamos abierto tanto 
el Fireworks como el Dreamweaver. 





FORMAS ALTERNATIVAS DE INSERCIÓN DE IMAGEN 


INSERCIÓN DE IMÁGENES 

Y CUESTIONES DE ESPACIO 

EN DREAMWEAVER 

Para insertar el encabezado, abrimos Dreamweaver 
y, en la ventana Archivos, lengúeta Archivos, 
hacemos doble clic izquierdo en el archivo 
index.html. Se abrirá el documento en el área de 
trabajo. Nos posicionamos en la primera celda de la 
tabla principal con el cursor y, en la barra de 
Propiedades, nos aseguramos de colocar la alinea- 
ción horizontal (Horiz) Centro y la alineación 
vertical (Vert) Superior. En la ventana Archivos, 
lengúeta Archivos, abrimos la carpeta img y, den- 
tro de ésta, la carpeta gif. Buscamos el archivo 
encabezado. gif y lo arrastramos con el mouse a la 
primera celda de la tabla principal. Cuando lo solte- 
mos, aparecerá un cartel (Atributos de accesibi- 
lidad de la etiqueta de imagen). 


Ha llegado la hora 

de comenzar a insertar 
todas las imágenes 

que trabajamos 

a lo largo de los últimos 
cuatro capitulos 





Además de arrastrarla desde la subcarpeta correspondiente a la celda deseada, pode- 


mos posicionarnos en esta última y seleccionar Insertar/Imagen en el menú principal. 


Esto abrirá una ventana que nos permitirá elegir la imagen deseada. 
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Presionamos Aceptar 0 Cancelar, sin rellenar nin- 
gún campo, ya que luego lo haremos directamente 
en las propiedades de la imagen. Podemos observar 
que el encabezado aparece en la celda donde estaba 
posicionado. Repetimos el mismo procedimiento con 
las líneas divisorias, los banners y el pie de página. 


Por último, nos falta la barra de navegación que 
diseñamos en Fireworks, pero antes de insertarla 
debemos realizar algunos agregados y modificacio- 
nes para que funcione correctamente. Luego tene- 
mos que exportarla y colocarla en Dreamweaver. 
Antes de pasar a este punto, podemos previsualizar 
la página con F12, para ver cómo queda. 


PROGRAMACIÓN 

Y EXPORTACIÓN DE LA BARRA 

DE NAVEGACIÓN DINÁMICA 

Para insertar nuestra barra de navegación y que fun- 
cione, primero, debemos programar ciertos detalles 
y, luego, realizar un proceso de exportación sencillo, 
pero teniendo en cuenta ciertos detalles. Abrimos 
Fireworks y vamos a Archivo/Abrir para desple- 
gar nuestra barra de navegación en el área de traba- 
jo. Recordemos que está en la carpeta Originales. 


Es fundamental programar los vínculos en las áreas 
de división correspondientes a los textos de cada 


ZONA INTERACTIVA 


sección. Para esto, debemos seleccionar cada una 
con la Herramienta Puntero y escribir el nombre 
del vínculo en la opción Vínculo de la barra de 
Propiedades. Nos resta exportar la barra de nave- 
gación, para poder insertarla en Dreamweaver, 
vamos a Archivo/Presentación preliminar de 
la imagen. En Configuraciones guardadas, ele- 
gimos GIF WebSnap 256 y oprimimos Exportar. 


En la siguiente ventana (Exportar) debemos visua- 
lizar el contenido de la carpeta principal, no de una 
subcarpeta. Fireworks exporta, en este caso, dos 
tipos de archivo: un HTML y un grupo de imágenes. 


El primero debe estar suelto en la carpeta principal 
del sitio, y los segundos tienen que ir dentro de la 
subcarpeta correspondiente. En la opción Nombre, 
nos aseguramos, sea cual sea, que esté escrito en 
minúscula, sin espacio, y que sea un nombre apto 
para la Web. La opción Exportar debe decir HTML 
e imágenes. En HTML, se tiene que leer Exportar 
Archivo HTML. Divisiones debe decir Exportar 
divisiones. Más abajo, marcamos la opción 
Colocar imágenes en subcarpeta y hacemos clic 
en Examinar cuando se active. Allí, tenemos que 
seleccionar la subcarpeta gif, dentro de la carpe- 
ta img, y hacer clic en Seleccionar “gif”. 
Finalmente, oprimimos Guardar. 





En Fireworks, a la izquierda de la Herramienta División, se encuentra la Herramienta Zona 


interactiva. No debemos nunca confundirla con la primera, ya que su utilidad reside en la 


creación de un mapa de imagen, algo que es mucho más práctico realizar en Dreamweaver. 
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Vamos a Dreamweaver, abrimos el archivo 
index.html (si no lo hemos abierto) y nos posicio- 
namos con el cursor en la celda correspondiente a la 
barra de navegación. En la barra de Propiedades, 
colocamos la alineación horizontal (Horiz) Centro 
y la vertical (Vert) Superior. 


En el menú principal, seleccionamos Insertar / 
Objetos de imagen/HTML de Fireworks. En la 
ventana que se abre, oprimimos Examinar y busca- 
mos el archivo HTML que Fireworks exportó, en la 
carpeta principal de InterWeb. 


Oprimimos Aceptar. La barra de navegación apa- 
recerá en la celda. Guarde el archivo con CTRL+S y 
pruébelo con F12. Es probable que, al probarlo local- 
mente en Internet Explorer, aparezca una pequeña 
barra amarilla de seguridad, justo debajo de la 
Barra de direcciones, que impide la animación 
de la barra de navegación. 


Hacemos un clic izquierdo en ella, seleccionamos 
Permitir contenido bloqueado y, en la ventana 
Advertencia de seguridad, presionamos Si. Si la 
barra amarilla no aparece, no nos debemos preocupar. 
Ya hemos colocado la barra de navegación dinámi- 
ca en Dreamweaver y la hemos probado. Si algún 
componente no funciona, es probable que el error 


© 


SITIOS CON DIFERENTES ESTRUCTURAS DE PÁGINA 


esté en cómo exportamos el archivo desde 
Fireworks. En este caso, conviene volver a realizar 
los pasos de exportación. Si el problema persiste, 
seguramente nos hemos olvidado de colocar algún 
comportamiento en el área de división correcta. 
Debemos seleccionar cada una de éstas y fijarnos en 
la ventana Comportamientos si todo está en orden. 


CONTENIDO DE TEXTO 

Y AJUSTES DE DISEÑO 

Ya tenemos casi lista nuestra página inicial, lo 
único que falta es agregarle texto, quizás alguna 
imagen más, y ajustar un poco el diseño con las 
propiedades de las celdas y tablas. 


Comenzaremos con el agregado de textos. Como es 
un proyecto, no repararemos demasiado en el con- 
tenido ya que, generalmente, éste es provisto por el 
cliente o es desarrollado en más profundidad y con 
más tiempo. Todo el texto que se escribirá en el sitio 
de InterWeb es solo a modo de ejemplo. 


Primero, nos posicionaremos en la celda destinada 
al título, es decir, en la primera fila de la segunda 
tabla secundaria, y la alinearemos Centro — Supe- 
rior. Allí escribiremos La Empresa, marcaremos el 
texto y le aplicaremos el estilo titulo, desde la 
opción Estilo, en la barra de Propiedades. 





Si armamos un sitio web no corporativo, es probable que las diferentes páginas no ten- 


gan las mismas propiedades y estructuras de tablas. En este caso, sí nos conviene 


desarrollar cada una desde el comienzo. 
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Ahora, nos posicionaremos en la primera columna 
de la tercera tabla secundaria y escribiremos algo 
de texto, siempre a modo de ejemplo, ya que se 
trata de un proyecto. Colocaremos unos cuatro 
párrafos de cuatro líneas cada uno y pasaremos a 
la segunda columna para hacer lo mismo. No 
debemos olvidarnos de alinear las celdas (ambas) 
Izquierda — Superior. Por último, le cambiaremos 
el color a la celda del título. Para esto, nos posicio- 
naremos con el cursor en ella, en la barra de 
Propiedades, buscaremos la opción Fnd con el 
cuadrado de color (Color de fondo) y seleccionare- 
mos blanco pleno (#FFFFFF). 


GUARDAR DIFERENTES ARCHIVOS 

Por el momento, tenemos solamente un archivo 
HTML, nuestro index.html. Es hora de comenzar a 
crear los otros que necesitamos para completar el sitio. 


Si algún componente 

no funciona, es probable 
que el error esté en como 
exportamos el archivo 
desde Fireworks 


La forma más fácil de hacerlo es duplicar el archivo 
index.html y cambiarle el contenido. De esta 
forma, mantendremos la estructura y todas las pro- 
piedades y nos ahorraremos, así, mucho tiempo. 
Esto se hace con la opción Guardar como, que se 
encuentra en Archivo. En la ventana que aparece, 
en la opción Nombre, escribiremos el nombre del 
nuevo archivo. Comenzaremos por disenioweb. 
No es necesario colocar la extensión, ya que 
Dreamweaver lo hace automáticamente. 


Una vez que oprimamos Guardar, notaremos que el 
nombre de archivo cambia por el que colocamos en 
la ventana Guardar como. También veremos que 
tenemos un nuevo archivo HTML en la ventana 
Archivos. Lo único que debemos hacer es comen- 
zar a cambiarle el contenido y habremos finalizado 
el diseño de nuestro sitio web. 


») RESUMEN 


En este capítulo, hemos diseñado y programado los elementos gráficos dinámicos de nues- 
tro sitio. También, profundizamos en varias herramientas de Fireworks para descubrir todas 
sus posibilidades. Además insertamos nuestros archivos en Dreamweaver. 
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Multiple choice 


D 1 ¿Cuál de las siguientes opciones permite 
colocar un texto alternativo a la imagen? 

a- Vínculo. 

b- ALT 

c- Destino. 

d- Ninguna de las anteriores. 


p 2 ¿Dentro de cuál de los siguientes 
lenguajes se encuentra el HTML? 

a- Lenguaje de etiquetas. 

b- Lenguaje de programación sin compilación. 


c- Lenguaje de programación con compilación. 


d- Ninguno de los anteriores. 


D 3 ¿Dentro de cuál de los siguientes 
lenguajes se encuentra Javascript? 

a- Lenguaje de etiquetas. 

b- Lenguaje de programación sin compilación. 


c- Lenguaje de programación con compilación. 


d- Ninguno de los anteriores. 


D 4 ¿Cuál de los siguientes lenguajes 

es muy complejo? 

a- Lenguaje de etiquetas. 

b- Lenguaje de programación sin compilación. 
c- Lenguaje de programación con compilación. 
d- Ninguno de los anteriores. 


p 5 ¿Cuál de las siguientes opciones permite 
colocar la locación en que se abre el vinculo? 
a- Vínculo. 

b- ALT 

c- Destino. 

d- Ninguna de las anteriores. 


p 6 ¿Dónde debemos escribir el vínculo con 
el que queremos que el área esté conectada? 
a- Vínculo. 

b- ALT 

c- Destino. 

d- Ninguna de las anteriores. 
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Encontraremos información adicional 


relacionada con el contenido que servirá 
para complementar lo aprendido. 
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Técnico Hardware 


Esta obra es fundamental para ganar 
autonomía al momento de reparar la PC. 
Aprenderemos a diagnósticar y solu- 
cionar las fallas, así como a prevenirlas 
a través del mantenimiento adecuado, 
todo explicado en un lenguaje práctico y 
sencillo. 
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Windows Seven Avanzado 


Esta obra nos presenta un recorrido ex- 
haustivo que nos permitirá acceder a un 
nuevo nivel de complejidad en el uso de 
Windows 7. Todas las herramientas son 
desarrolladas con el objetivo de acom- 
pañar al lector en el camino para ser un 
usuario experto. 
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PHP Avanzado 


Este libro brinda todas las herramientas 


necesarias para acercar al trabajo diario 
del desarrollador los avances más im- 
portantes incorporados en PHP 6. En sus 
páginas, repasaremos todas las técnicas 
actuales para potenciar el desarrollo de 
sitios web. 
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Photoshop 


En este libro aprenderemos sobre las 
más novedosas técnicas de edición de 
imágenes en Photoshop. El autor nos 
presenta de manera clara y práctica to- 
dos los conceptos necesarios, desde la 
captura digital hasta las más avanzadas 
técnicas de retoque. 
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AutoCAD 


Este manual nos presenta un recorrido 
exhaustivo por el programa más difundi- 
do en dibujo asistido por computadora a 
nivel mundial, en su versión 2010. En sus 
páginas, aprenderemos desde cómo tra- 
bajar con dibujos predeterminados hasta 
la realización de objetos 3D. 
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Grabación y producción de música 


En este libro repasaremos todos los 
aspectos del complejo mundo de la pro- 
ducción musical. Desde las cuestiones 
para tener en cuenta al momento de la 
composición, hasta la mezcla y el mas- 
terizado, así como la distribución final del 
producto. 
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Linux 


Este libro es una completa guía para mi- 
grar e iniciarse en el fascinante mundo 
del software libre. En su interior, el lector 
conocerá las características de Linux, 
desde su instalación hasta las opciones 
de entretenimiento, con todas las venta- 
jas de seguridad que ofrece el sistema. 
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Excel Paso a Paso 


En esta obra encontraremos una increí- 
ble selección de proyectos pensada 
para aprender mediante la práctica la 
forma de agilizar todas las tareas diarias. 
Todas las actividades son desarrolladas 
en procedimientos paso a paso de una 
manera didáctica y fácil de comprender. 
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Esta obra nos presenta un recorrido de- 
tallado por las aplicaciones audiovisua- 
les de Adobe: Premiere Pro, After Effects 
y Soundbooth. Todas las técnicas de los 
profesionales, desde la captura de video 
hasta la creación de efectos, explicadas 
de forma teórica y práctica. 
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Este libro es un completo curso de 
programación con C% actualizado a 
la versión 4.0. Ideal tanto para quie- 
nes desean migrar a este potente 
lenguaje, como para quienes quieran 
aprender a programar desde cero en 
Visual Studio 2010. 
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Office 2010 


En este libro aprenderemos a utilizar 


todas las aplicaciones de la suite, en 
su versión 2010. Además, su autora nos 
mostrará las novedades más impor- 
tantes, desde los minigráficos de Excel 
hasta Office Web Apps, todo presentado 
en un libro único. 
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Esta obra es una guía básica que 


responde, en forma visual y práctica, 
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equipo seguro. Definiciones, conse- 
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DIFUNDA SUS Esta obra contiene todos los 
IDEAS Y recursos necesarios para 


aprender a crear y administrar 
blogs. A través de sus páginas 
aprenderemos a dominar las dos 
herramientas más utilizadas en 
la actualidad: WordPress y Blog- 
ger; hasta llegar a realizar sitios 
profesionales y atractivos. 
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Sitios web 
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